offsetHeight 와 clientHeight

offsetHeightclientHeight의 차이점을 찾아보다 MSDN에서 관련된 이미지들을 보았다. offsetHeightclientHeight 뿐만 아니라 엘리먼트에 대한 치수와 위치에 대해 확인할 수 있다.

추가적으로 offsetHeightclientHeight 같이 엘리먼트의 위치를 가져와서 계산해야하는 경우에는 Reflow를 피하기 위해 캐시를 사용해야 한다.

P.S.

추가적으로 좋은 예제가 있어서 첨부하였다.

P.S.

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

getComputedStyle() 메서드를 통해서 주어진 요소의 모든 CSS 속성값을 알 수 있다. 이때 가져오는 속성값들은 해당 요소에 대하여 기본적인 연산이 반영되어 적용된 이후 결과값들이다.

SmileCat

SmileCat
How do you define yourself?

[Openlayers] Render Event 정리

## 이벤트### [Map](http://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)| event | module | note || :--: | -- | -- || [postcompose](...… Continue reading