<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>동적으로 폰트 늘이기 및 줄이기</title>
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.hidden { display:none; }
.hover { cursor:hand; background-color:Yellow;}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$('div.button').click(
function() {
// 본문 영역을 변수에 담기
var $region = $('div.region');
// 본문 영역의 폰트 사이즈 가져오기
var currentSize = $region.css('fontSize');
// px 문자를 제외한 16만 가져오기
var num = parseFloat(currentSize,10); //16
// px 단위 가져오기
var unit = currentSize.slice(-2); // 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>
<body>
<div id="btn">
<div class="button" id="goBig">늘리기</div> <div class="button" id="goSmall">줄이기</div>
</div>
<div class="region">
안녕하세요? 여기는 본문입니다.
</div>
</body>
</html>
'백엔드 프레임워크 & 언어' 카테고리의 다른 글
| 콜백(Callback) 과 맵(Map) (0) | 2011.03.09 |
|---|---|
| 브라우저 버전 알아내기 (0) | 2011.03.09 |
| jQuery 기본 템플릿 (0) | 2011.03.09 |
| [JDBC] dbcpTest.jsp (0) | 2011.02.27 |
| 10g emptable script (0) | 2011.02.20 |