css()메서드를 사용하여 폰트 늘리기 및 줄이기
.NET프로그래밍/jQuery 1.3.2 2009. 11. 9. 09:10 |[Css.htm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>폰트 늘리기 및 줄이기</title>
<style type="text/css">
</style>
<script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.button').click(function () {
// 본문 영역을 변수에 담기
var $region = $('div.region');
// GET : 본문 영역의 폰트 사이즈 가져오기
var currentSize = $region.css('fontSize'); // 16px
// px 문자열을 제외한 16만 가져오기
var num = parseFloat(currentSize, 10); // 16px -> 16
// px : 단위를 가져오기
var unit = currentSize.slice(-2); // 16px -> px : 오른쪽에서 2자 가져옴
// 늘리기/줄이기
if (this.id == 'goBig') {
num *= 1.5;
}
else if (this.id == 'goSmall') {
num /= 1.5;
}
// SET : 새롭게 설정된 픽셀값을 레이어 재 설정 : css()
$region.css('fontSize', num + unit); // ?? + px
});
});
</script>
</head>
<body>
<div id="btn">
<div class="button" id="goBig">늘리기</div>
<div class="button" id="goSmall">줄이기</div>
</div>
<div class="region">
안녕하세요. 여기는 본문입니다.
</div>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
--> 첫 화면.
--> '늘리기'텍스트를 마우스로 클릭했을때의 화면.
--> '줄이기'텍스트를 마우스로 클릭했을때의 화면
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| 콜백(CallBack) : 매개변수로 함수를 전달 (0) | 2009.11.09 |
|---|---|
| 브라우저 버전 나타내기 (0) | 2009.11.09 |
| one()메서드로 한번만 실행 (0) | 2009.11.06 |
| hover()로 마우스오버와 아웃을 동시 처리 (0) | 2009.11.06 |
| toggleClass() 메서드로 CSS 클래스에 대한 토글링 (0) | 2009.11.06 |