JQuery

font.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript"
  src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	var fontSize;
	//$(document).ready(init()); //오류-실행안됨
	$(document).ready(init);
/* 	$(document).ready(function(){
		init();
	}); */ //무명함수 호출
	
	function init() {
		$("#fontControl li a").click(clickHandler);
	}
	function clickHandler(e) {
		e.preventDefault(); //기본효과 막음
		var whichClicked = $(this).attr("id");
		fontSize = parseInt($(".content").css("font-size"));
		switch (whichClicked) {
		case "larger":
			setFontSize(5);
			break;
		case "smaller":
			setFontSize(-5);
			break;
		}
	}
	function setFontSize(size) {
		var totalFontSize = fontSize + size;

		$(".content").css({
			"font-size" : totalFontSize + "px"
		});
	}
</script>
<style type="text/css">
.content {
  font-size: 12px;
}
</style>
</head>
<body>
  <h2>글꼴 사이즈 조절</h2>
  <div id="div1">
    <ul id="fontControl">
      <li><a href="#" id="larger">크게</a></li>
      <li><a href="#" id="smaller">작게</a></li>
    </ul>
  </div>
  <div class="content">테스트 문자열</div>
</body>
</html>

 

 

 

글꼴 사이즈 조절

테스트 문자열

 

 

 

about author

PHRASE

Level 60  머나먼나라

옷이 날개라 , 못난 사람도 옷을 잘 입으면 잘나 보인다는 말.

댓글 ( 0)

댓글 남기기

작성

JQuery 목록    more