자바스크립트 스타일 가져오기

인라인 스타일에 접근하기

html코드가 아래처럼 되어 있다고 가정합니다.

<div id="test_1" style="color:#ff0000"> 
    테스트1
</div>
  • 먼저 선택합니다.
// 아이디로 불러온다.
var test1 = document.getElementById("test_1");

// color 값을 읽어온다
alert(test1.style.color);

// rgb(255, 0, 0)

인라인이 아닌 스타일 가져오기

inline 스타일이 아닌 경우 스타일 접근하는 방법은 getComputedStyle()함수를 이용해서 전체스타일을 구한 후, 속성에 접근해야 됩니다.
단, 모든 값은 읽기전용. 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>스타일 가져오기</title>
    <style>
        #test_1 {
            font-size:24px;
        }
    </style>
</head>
<body>
    <div id="test_1">테스트1</div>

    <script>
        window.onload=function(){
            var test1 = document.getElementById("test_1");
            var style = window.getComputedStyle(test1,null);
            alert(style.fontSize);
        }
    </script>
</body>
</html>

만약 getComputedStyle() 함수를 쓰지않는다면

var test1 = document.getElementById("test_1");
alert(test1.fontSize);
// undefined 출력

getComputedStyle 함수는 IE8이하는 지원하지 않습니다.

위코드에서 IE에서 사용하려면 currentStyle을 사용하면 됩니다.
아래처럼 사용하면 됩니다. 

var style = test1.currentStyle;

하지만 하위브라우져까지 지원하는 코드가 있습니다.
하위브라우져까지 지원하려는 코드를 사용하려면 아래의 코드를 추가해줘야 한다. 

if (!window.getComputedStyle) {
    window.getComputedStyle = function(element) {
        return element.currentStyle;
    }
}

그래서 자바스크립트 부분의 전체코드는 아래와 같다. 

window.onload=function(){
    if (!window.getComputedStyle) {
        window.getComputedStyle = function(element) {
            return element.currentStyle;
        }
    }
    var test1 = document.getElementById("test_1");
    var style = window.getComputedStyle(test1,null);
    alert(style.fontSize);
}
개    개