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
- clientWidth, clientHeight
- offsetWidth, offsetHeight
- scrollWidth, scrollHeight
- 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.
Property | document.body | document.documentElement | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
IE 5.0 & 6.0 Win nodoc | IE 6.0 Win doc | IE 5 Mac | Mozilla 1.0 | Opera 6 | IE 5.0 Win | IE 6.0 Win nodoc | IE 6.0 Win doc | IE 5 Mac | Mozilla 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 offset | 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 | ||
Property | document.body | document.documentElement | |||||||||
IE 5.0 & 6.0 Win nodoc | IE 6.0 Win doc | IE 5 Mac | Mozilla 1.0 | Opera 6 | IE 5.0 Win | IE 6.0 Win nodoc | IE 6.0 Win doc | IE 5 Mac | Mozilla 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 Win | IE 6.0 Win nodoc | IE 6.0Win doc | IE 5 Mac | Mozilla 1.0 | Opera 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)
1 nhận xét:
Okuldan kaçıp erkek arkadaşıyla sikişen liseli porno gizli saklı sex porno videosunu izle
Post a Comment