티스토리 뷰

WEB/jQuery

[jQuery] 함수를 이용한 폰트의 크기 조절

춘햄 2021. 6. 2. 15:58

jQuery를 이용하여 해당 버튼을 클릭할 때마다 폰트의 크기를 1.5배씩 크게하거나, 작게하는 코드를 작성할 수도 있다.

jQuery는 요소.css('속성', 수치) 등으로 직접적으로 해당 요소의 css를 지정할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폰트 늘리기 및 줄이기</title>

<style type="text/css">
.button {
	background-color: Yellow;
}

.region {
	color: Red;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('div.button').click(function() {
			
			// jQuery에서 요소의 내부 속성들을 변경시키기 위해 변수를 선언할 경우에는
			// var $변수명 과 같이 선언해야 한다.
			/**
				var 변수명 = 요소;
				변수명.자바스크립트 관련 함수들만 사용 가능
				var $변수명 = 요소;
				$변수명.jQuery 관련 함수들 사용 가능
			**/
			
			var $region = $('div.region');
			
			var currentSize = $region.css('fontSize'); 
			
			var num = parseFloat(currentSize, 10); //16px -> 16
			
			var unit = currentSize.slice(-2);  // 16px -> px
				
			if(this.id == "goBig") {
				num = num * 1.5;
			} else {
				num = num/1.5;
			}
			
			$region.css('fontSize', num+unit);
			
			
		})
	});
</script>

</head>

<body>
	<div id="btn">
		<div class="button" id="goBig">늘리기</div>
		<div class="button" id="goSmall">줄이기</div>
	</div>
	<br>

	<div class="region">안녕하세요. 여기는 본문입니다.</div>
</body>

</html>

 

'WEB > jQuery' 카테고리의 다른 글

[jQuery] attr() 를 이용한 이미지 출력  (0) 2021.06.07
[jQuery] Attr 제어 <기본>  (0) 2021.06.07
[jQuery] 이벤트를 최초 한번만 실행하는 one()  (0) 2021.06.02
[jQuery] hover()  (0) 2021.06.02
[jQuery] toggle()  (0) 2021.06.02
공유하기 링크
Comments
Related Articles more