node.offsetWidth vs clientWidth vs scrollWidth

L

liketofindoutwhy

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.

Thanks very much!
 
R

Rik Wasmus

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.
Click to expand...

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;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<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.
 
J

Joost Diepenmaat

liketofindoutwhy said:
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.
Click to expand...

Last time I checked, only the offset* attributes were reliable in all
popular browsers. This may have changed, though. See

http://www.quirksmode.org/viewport/elementdimensions.html
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.
Click to expand...

Scrollwidth isn't about hiding per se, it's about having a content area
wich is scrolled inside an area that's smaller. IOW, it's using
overflow: auto / srcoll.
 
L

liketofindoutwhy

I have no intimate knowledge of the subject, but making them all 3
different is no trouble at all:
Click to expand...


if it is

<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 style="display:block;width:8em;height:
3em;overflow:scroll;">
<img onclick="test(this)" src="http://
www.sanrio.co.jp/english/characters/w_chara/pocha180.gif"
</div>
</body>
</html>

then the offsetWidth and scrollWidth is the same... so it looks like
scrollWidth reflects an element with a scroll box, not an element
contained in a scrollbox.
 
L

liketofindoutwhy

then the offsetWidth and scrollWidth is the same... so it looks like
scrollWidth reflects an element with a scroll box, not an element
contained in a scrollbox.
Click to expand...

i mean reflects something different for an element with a scrollbox,
nothing different for an element simply being inside the scrollbox.
 
R

Rik Wasmus

i mean reflects something different for an element with a scrollbox,
nothing different for an element simply being inside the scrollbox.
Click to expand...

I'd say that would be so, and for good reason. The width of the image
element is not altered in any way, it just happens to be in a element
which itself is not 'fully extended'.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

using code behind to change the innerhtml of a client side div 3
Slide-in & slide-out Scroller Help! 0
Now I've seen everything 12
FAQ 9.3--Replacement? 3
Mandatory Elements To Conduct JavaScript Form Manipulation 7
Creating a regex to get multiple values and print 0
Only one table shows up with the information 2
Processing in Python help 0

Members online

No members online now.
Total: 39 (members: 2, guests: 37)
Robots: 192

Forum statistics

Threads
473,763
Messages
2,569,562
Members
45,038
Latest member
OrderProperKetocapsules

Latest Threads

Top