Develope/Javascript
scrollHeight, clientHeight, offsetHeight 각각의 의미
친절한 웬디양~ㅎㅎ
2010. 10. 1. 19:00
반응형
scrollHeight, clientHeight, offsetHeight 셋 모두 높이를 나타내는데요,
각각의 정확한 의미를 정리합니다.
* javascript code
<script type="text/javascript">
function msg( oTgt )
{
var oDivID = oTgt ;
alert( oDivID.scrollHeight ) ;
alert( oDivID.clientHeight ) ;
alert( oDivID.offsetHeight ) ;
}
</script>
* html code
<div id=”divID” style="height=100px;background-color:blue;overflow:scroll" onclick="msg(this);">
abcdefghijklmn<br/>
abcdefghijklmn<br/>
abcdefghijklmn<br/>
abcdefghijklmn<br/>
abcdefghijklmn<br/>
abcdefghijklmn<br/>
</div>
각 단위는 픽셀 단위입니다.
scrollHeight : 스크롤바 높이를 뺀 내용 전체의 높이
clientHeight : 스크롤바 높이를 뺀 가시적인 높이
offsetHeight : 스크롤바 높이를 포함한 가시적인 높이
이상입니다.
관련정보 제공자 : mhlee 님, cute772 님
반응형