document.body, doctype, scroll bar height, clientHeight, offsetHeight, scroll size

document.body and doctype switching

What is the meaning of the various properties of document.body and document.documentElement? What happens in Explorer 6 when you use a doctype that causes compatibility mode? I did some research, but didn't find an overall theoretical model.

I've done some tests on these property pairs

  1. clientWidth, clientHeight
  2. offsetWidth, offsetHeight
  3. scrollWidth, scrollHeight
  4. scrollTop, scrollLeft

which may be properties of document.body and/or document.documentElement. I can't find much sense in the test results. An article summarizing the experiment has appeared on Evolt.

View the test pages for yourself, if you like.

Explorer 6 and doctypes

If you use a DOCTYPE that puts Explorer 6 in standards compliant mode, some properties of document.body are reassigned to document.documentElement. For instance, to get the scrollTop, you should do

document.documentElement.scrollTop

Of course, in Explorer 5 the properties still belong to document.body so that you have to separate 6 from 5. How to do this with a proper support detect? (Needless to say, I don't want a browser detect):

if (document.documentElement && document.documentElement.scrollTop)
theTop = document.documentElement.scrollTop;
else if (document.body)
theTop = document.body.scrollTop
else
[Netscape stuff]

Checking if the documentElement exists is not enough, since it exists in all W3C DOM compatible browsers. So we also have to see if it has a property scrollTop. If it has, we're in Explorer 6 and we should read it out. If it hasn't, read out body.scrollTop as usual.

See the sticky menu script for a practical implementation of this support detect.

Another possibility is to use Explorer's proprietary compatMode property and to see if it's not in 'BackCompat' mode (backward compatibility; the old, non-standard interpretation of the code):

if (document.compatMode && document.compatMode != "BackCompat")
theWidth = document.documentElement.clientWidth;
else
theWidth = document.body.clientWidth;

The disadvantage of this method is that it will only work in Explorer 6, not in any other browser that stores the information in document.documentElement. At the moment there is no such browser, but who knows that the future will bring? Therefore I don't use this detect.

Compatibility table

See also the article summarizing the experiment.


Propertydocument.bodydocument.documentElement
IE 5.0 & 6.0 Win
nodoc
IE 6.0 Win
doc
IE 5 MacMozilla 1.0Opera 6 IE 5.0 WinIE 6.0 Win
nodoc
IE 6.0 Win
doc
IE 5 MacMozilla 1.0
clientHeight Window height excluding scrollbar Height of the BODY element Window height excluding scrollbar Window height excluding scrollbar Window height excluding scrollbar (but never less than offsetHeight) 0 Window height excluding scrollbar undefined 0
clientWidth Window width excluding scrollbar Width of the BODY element Window width excluding scrollbar Window width excluding scrollbar Window width excluding scrollbar 0 Window width excluding scrollbar 0
offsetHeight Window height including scrollbar Height of the BODY element Height of the BODY element Height of the BODY element Height of the BODY element Window height including scrollbar Window height including scrollbar Height of the HTML element Height of the HTML element
offsetWidth Window width including scrollbar Width of the BODY element Window width excluding scrollbar Width of the BODY element Window width excluding scrollbar Window width including scrollbar Window width including scrollbar Window width excluding scrollbar Width of the HTML element
Propertydocument.bodydocument.documentElement
IE 5.0 & 6.0 Win
nodoc
IE 6.0 Win
doc
IE 5 MacMozilla 1.0Opera 6 IE 5.0 WinIE 6.0 Win
nodoc
IE 6.0 Win
doc
IE 5 MacMozilla 1.0
scrollHeight Height of the HTML element Height of the BODY element Window height excluding scrollbar Height of the HTML element undefined Window height including scrollbar Height of the HTML element undefined Height of the HTML element
scrollWidth Width of the HTML element Width of the BODY element Window width excluding scrollbar Width of the HTML element undefined Window width including scrollbar Width of the HTML element Width of the HTML element
scrollLeft Horizontal scrolling offset 0 Horizontal scrolling offset Horizontal scrolling offset Not sure Horizontal scrolling offset 0 Horizontal scrolling offset 0
scrollTop AVertical scrolling offset 0 Vertical scrolling offset Vertical scrolling offset Not sure Vertical scrolling offset 0 Vertical scrolling offset 0

Note: scrollLeft and scrollTop also work on DIV's with overflow: auto in Explorer 5+ on Windows and Mozilla 1.1

Table of measurements

Measurement IE 5.0 WinIE 6.0 Win
nodoc
IE 6.0Win
doc
IE 5 MacMozilla 1.0Opera 6
Window height excluding scrollbar b.clientHeight dE.clientHeight b.clientHeight
b.scrollHeight
b.clientHeight b.clientHeight (but it's never less than offsetHeight)
Window width excluding scrollbar b.clientWidth dE.clientWidth b.clientWidth
b.offsetWidth
dE.offsetWidth
b.scrollWidth
b.clientWidth b.clientWidth
b.offsetWidth
Window height including scrollbar b.offsetHeight
dE.offsetHeight
dE.scrollHeight
dE.offsetHeight not available
Window width including scrollbar b.offsetWidth
dE.offsetWidth
dE.scrollWidth
dE.offsetWidth not available
Height of the BODY element not available b.clientHeight
b.offsetHeight
b.scrollHeight
b.offsetHeight b.offsetHeight b.offsetHeight
Width of the BODY element not available b.clientWidth
b.offsetWidth
b.scrollWidth
not available b.offsetWidth not available
Height of the HTML element b.scrollHeight dE.scrollHeight dE.offsetHeight dE.offsetHeight
b.scrollHeight
dE.scrollHeight
not available
Width of the HTML element b.scrollWidth dE.scrollWidth not available dE.offsetWidth
b.scrollWidth
dE.scrollWidth
not available
Horizontal scrolling offset b.scrollLeft
dE.scrollLeft
b.scrollLeft dE.scrollLeft b.scrollLeft b.scrollLeft Probably b.scrollLeft
AVertical scrolling offset b.scrollTop
dE.scrollTop
b.scrollTop dE.scrollTop b.scrollTop b.scrollTop Probably b.scrollTop


(quirksmode.com)

0 nhận xét:

 

Coding experience share Copyright © 2010 | Designed by Ipietoon for Free Blogger Template