18.jQuery - CSS ( 18.CSS )
| 18.CSS.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Css()동적으로 폰트 늘리기 및 줄이기</title> <style type="text/css"> .button { background-color:Yellow; } .silver { color:Silver; } </style> <script src="jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('div.button').click(function() { //본문 영역을 변수에 담기 var $region = $('div.silver'); // 본문 영역의 폰트 사이즈 가져오기 var currentSize = $region.css('fontSize'); // 16px // px 문자열을 제외한 16만 가져오기 var num = parseFloat(currentSize, 10); // 16 // px : 단위를 가져오기 var unit = currentSize.slice(-2); // 오른쪽에서 2자 가져옴 // 늘리기/줄이기 if (this.id == 'goBic') { num *= 1.5; } else if (this.id == 'goSmall') { num /= 1.5; } // 새롭게 설정된 픽셀값을 레이어 재 설정 : css() $region.css('fontSize', num + unit); // ?? + px }); }); </script> </head> <body> <div id="btn"> <div class="button" id="goBic">늘리기</div> <div class="button" id="goSmall">줄이기</div> </div> <div class="silver">안녕하세요. 여기는 본문입니다.</div> </body> </html> |
| 결과화면 |
[그림18-1] |
18.CSS.htm