외부 css에 정의된 font-size 변경 방법 (jQuery 이용)

외부 css에 정의된 스타일을 가져오기 위해

DOM으로 처리를 할려고 했지만 HTML 태그 내부 인라인으로 정의된 style만 접근이

가능하기 때문에 아래 코드를 쓰게 되면 값이 가져오지를 못한다.

document.getByElementById("font1").style.fontSize

왜?? id가 "font1"이라는 div 태그안에는 style이 직접적으로 정의가 되어있지 않기 때문이다.

 

그래서 jQuery를 이용해서 객체를 생성하고 css의 값을 가져오도록 했다.

물론 Javascript로 할 순 있지만 코드만 길어지고 정신적인 스트레스가 올 것 같다.

아래 코드는 "+" 버튼을 클릭하면 div 내부의 현재 font-size에서 5px 증가한 값으로 변환시키고, "-" 버튼을 클릭하면 5px 감소한 값으로 변환시킨다.

 

HEADER

<link rel="stylesheet" type="text/css" href="common.css" />                                    

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
        $(function () {
            var div = $("div");

            $("#btnIncrease").click(function () {
                div.css("font-size", "+=5");
            });

            $("#btnDecrease").click(function () {
                div.css("font-size", "-=5");
            });

        });
</script>

 

CSS (외부 파일 common.css)

.font1 { font-size:11px; }
.font2 { font-size:20px; }

 

HTML

<input type="button" id="btnIncrease" value="+" />
<input type="button" id="btnDecrease" value="-" />
<div id="font1" class="font1">테스트1</div>
<div id="font2" class="font2">테스트2</div>