JavaScript - Element 에 적용된 CSS Style 가져오기

- Element.style.속성명 을 통해 적용중인 속성값 확인
	: style속성에서 직접준것이 아닐 경우 확인 불가

- document.defaultView.getComputedStyle(Element) 를 통해 적용중인 Style 확인 가능

- 프로토타입의 게터에서 정보를 추출
	: document.defaultView.getComputedStyle(Element).getPropertyValue("속성명"))

 

소스

<style>
    div {
        background-color: #ff0;
    }
</style>

<div style="width: 200px; height: 200px;">
    <p>DIV 입니다.</p>
</div>

<script>
    var divEle = document.querySelector("div");
    console.log("width", divEle.style.width);
    console.log("height", divEle.style.height);
    console.log("backgroundColor", divEle.style.backgroundColor);
    console.dir(document);
    console.dir(document.defaultView);
    console.dir(document.defaultView.getComputedStyle(divEle));
    console.dir("getPropertyValue" + document.defaultView.getComputedStyle(divEle).getPropertyValue("background-color"));
</script>

 

 

결과