670 No

글꼴 사이즈 조절

2017-09-03 18:46:12 By 머나먼나라 0 742 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

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>