티스토리 뷰

Programming Tips/Web Programming

[자바스크립트] DOM element의 실제 계산된, 그려진 스타일(width, height 등) 구하기

Unikys 2012. 12. 11. 17:04


* 자바스크립트로 DOM element의 넓이를 구할 때 단순히 아래와 같이 하면 제대로 적용이 안되는 경우가 있다.

<html>
<style>
  .myStyle {width: 400px;}
</style>
<body>
  <div class="myStyle"></div>
</body>
<script>
  console.log(document.querySelector(".myStyle").style.width); // ===""?
</script>
</html>


: 위와 같은 경우 브라우져상에서 실제로 보이는 width는 .myStyle로 인해 400px로 나와있지만, 9번째 줄에서 element에 접근하여 style의 width를 출력해보면 빈칸으로 나오게 된다. 왜냐하면 이 div의 width는 css의 클래스로 설정된 width이기 때문에, element 자체의 style안에는 width 값이 없기 때문이다. 이럴 때 DOM을 브라우져에 랜더링된 실제 넓이를 구하는 방법은 다음과 같다.

  console.log(window.getComputedStyle(document.querySelector(".myStyle")).width); // === "400px"

: DOM 에 나와있는 실제 계산된 스타일을 구하는 방법은 바로 window.getComputedStyle(element) 함수를 이용하면 된다. 인자로는 element를 넘겨주며, 결과로 브라우져에서 계산된 스타일을 계산해서 넘겨주게 된다. IE 같은 경우는 위의 함수가 없고, element.currentStyle로 접근을 하면 된다.


* 팁: 위처럼 간단한 작업이라면 DOM을 뒤지는 것보다, jQuery의 $를 쓰는것보다 querySelector를 사용하는것이 더 빠르므로 자주 이용하자! (물론 DOM에 접근하는 것 자체가 성능상 매우 안 좋은일이기는 하지만..)


끝.

저작자표시 비영리 동일조건
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함