1. css()함수 사용 - 예를 들어서 기사나 본문글 폰트 키우고 줄이는 걸 적용해보자.
<!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="utf-8" >
<title> slice method </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
.red{color:red;}
</style>
<script>
$(document).ready(function (){
$('div.button').click(function(){
//본문 영역을 변수에 담기
var $exec = $('div.exec');
//본문 영역의 폰트 사이즈 가져오기
var currentSize = $exec.css('fontSize'); //alert(currentSize);
//px문자열을 제외한 16만 가져오기
var num = parseFloat(currentSize, 10);
//px : 단위가져오기
var unit = currentSize.slice(-2);// 16px -> px 오른쪽에서 2자
//늘리기/줄이기
if(this.id == 'goBig'){
num *= 1.5;
}else if(this.id == 'goSmall'){
num /= 1.5;
}
//새롭게 설정된 픽셀값을 레이어 재 설정
$exec.css('fontSize', num + unit);
});
});
</script>
</head>
<body>
<div id="btn">
<div class="button" id="goBig">bigger</div>
<div class="button" id="goSmall">smaller</div>
</div>
<div class="exec">
Hello!. This is a main articles
</div>
</body>
</html>
2. 콜백(Callback)과 맵(Map)
'강좌 > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) - jQuery 선택기(셀렉터, 실렉터, 선택자, Selector) 설명 1 (0) | 2013.04.22 |
|---|---|
| 제이쿼리(jQuery) - each() 메서드 (0) | 2013.04.22 |
| 제이쿼리(jQuery) - toggle(), toggleClass(), hover(), one() 메서드. (0) | 2013.04.22 |
| 제이쿼리(jQuery) - filter()와 slice() 메서드. (0) | 2013.04.22 |
| 제이쿼리(jQuery) - addClass()와 removeClass() (0) | 2013.04.20 |
