요소의 스타일 정보 가져오기

문제

요소의 CSS 스타일 설정을 가져오고 싶다.

해결

인라인 또는 자바스크립트를 통해 설정한 스타일 정보에 접근하고 싶다면 요소의 스타일 속성을 사용하면 된다.

var width = elem.style.width;

설정 여부에 상관없이 요소의 스타일 정보에 접근하고 싶다면 크로스 브라우저 접근 방법을 사용해야 한다.

function getStyle(elem, cssprop, cssprop2){

    //IE
    if(elem.currentStyle){
        return elem.currentStyle[cssprop];

    //다른 브라우저    
    }else if(document.defaultView && document.defaultView.getComputedStyle){
        return document.defaultView.getComputedStyle(elem, null).getPropertyValue(cssprop2);

    //대비책    
    }else{
        return null;
    }
}

window.onload = function(){
    //스타일 속성 설정 및 접근
    var elem = document.getElementById("elem");
    var color = getStyle(elem, "backgroundColor", "background-color");
    alert(color);   //rgb(0, 255, 0);
}