JavaScript - Element 에서 font 크기를 가져온 뒤 수정하기

소스

<p>
    <a href="#1" onclick="sizeUp();">크게</a>
    <a href="#1" onclick="sizeDown();">작게</a>
</p>
<div>
    <p>
        HTML 요소<br />
        HTML 요소(HTML 엘리먼트, HTML element)는 HTML 문서나 웹 페이지를 이루는 개별적인 요소를 의미하며, 문서 객체 모델(DOM)으로 파싱된다. HTML은 트리나 HTML 노드(텍스트 노드 등)로 구성된다.
        각 노드는 HTML 속성을 지정할 수 있다. 노드들은 기타 노드와 텍스트를 포함한 콘텐츠도 소유할 수 있다. 수많은 HTML 노드들은 시맨틱이나 의미를 표현한다. 이를테면 title 노드는 문서의 제목을
        나타낸다.
    </p>
    <p>
        문서와 DOM<br />
        HTML 문서들은 "문서"(document)로 전달된다.[note 1] 이들은 구문 분석 과정을 거쳐 웹 브라우저 내에서 문서 객체 모델(DOM) 내부 표현으로 변환된다.[note 2][note 3] 화면과 같은 웹 브라우저의
        표현이라든지 자바스크립트의 접근은 그 다음에 이 내부 모델에서 수행되며 원래의 문서에서 수행되지는 않는다. 초기의 HTML 문서들은 오늘날 어느 정도는 크게 유효하지 않은 HTML이었으며 문법
        오류 투성이었다. 가능한 이러한 오류를 해결하기 위해 파싱 과정도 필요했다. 그 결과의 모델은 정확하지는 않지만(이를테면 주의깊은 코더가 원래 의도한 바를 표현하지 못하는 등) 적어도 HTMl
        표준에 따라 유효하다. 유효한 모델은 제공되는 태그 숩이 얼마나 나쁜지에 관계 없이 만들어진다. 극소수의 경우에만 파서가 파싱을 포기한다.
    </p>
</div>

<script>
    var divEle = document.querySelector("div");

    function sizeUp() {
        var fs = document.defaultView.getComputedStyle(divEle).getPropertyValue("font-size");
        console.log("font size", fs);
        divEle.style.fontSize = parseInt(fs) + 2 + "px";
    }

    function sizeDown() {
        var fs = document.defaultView.getComputedStyle(divEle).getPropertyValue("font-size");
        console.log("font size", fs);
        divEle.style.fontSize = parseInt(fs) - 2 + "px";
    }
</script>

 

결과