On Thu, 24 Apr 2008 11:17:42 +0200, liketofindoutwhy
<li**************@gmail.comwrote:
>
for the code
var node = document.getElementById("something")
alert(node.offsetWidth)
is very similar to node.clientWidth and node.scrollWidth
I just wonder why offsetWidth is well documented in the Definitive
Javascript book, but clientWidth and scrollWidth are not mentioned at
all, even when all 3 of them work in IE6, IE 7, Firefox 2, and Safari
3.
Also it seems that scrollWidth is always the same as offsetWidth. I
can't make them different by hiding some part of that element so that
one value is smaller and one is larger.
I have no intimate knowledge of the subject, but making them all 3
different is no trouble at all:
<html>
<head><title>test</title>
<script type="text/javascript">
function test(elm){
alert('offsetwidth:' + elm.offsetWidth + ', scrollWidth: '
+ elm.scrollWidth + ', clientWidth: ' + elm.clientWidth);
}
</script>
</head>
<body>
<div onclick="test(this)"
style="display:block;width:8em;height:3em;overflow :scroll;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaa<br>
</div>
</body>
</html>
Results (FF2)here: 128, 477,112; I suspect, but feel free to correct me:
offsetWidth: width on page
scrollWidth: total width of element from left to right (so in this case
scrollable content).
clientWidth: visible portion of width due to existance of scrollbar.
--
Rik Wasmus
