Basically every browser except Internet Explorer agrees where the dimensions information is located. Can’t say that I’m particularly surprised, Microsoft has made it their mission to complicate these things.
For a nice visual list of available properties and browser support check out the W3C DOM CSS Object Model Compatibility article on QuirksMode. It’s a very nice list of many useful properties and methods as well as a chart of what browsers support them and how effective their support is.
View port dimensions
I found three possible objects that contain the view port size information. In most browsers the
self
object has the properties of innerWidth
and innerHeight
. However Internet Explorer has two other objects, IE6 keeps this information in the document.documentElement
object and all new IEs use thedocument.body
object. These objects have a clientWidth and clientHeight
property.
Document dimensions
Once again, I found three different ways to get the document measurements. Most browsers agree that this information is stored in the
document.body
object. However Firefox’s best measurement of total document height seems to be window.innerHeight + window.scrollMaxY
. The rest of the browsers respond to the scrollWidth/scrollHeight
or offsetWidth/offsetHeight
.Scroll offset
Last but not least is the scroll offset, and again three different possible locations for this information. The general consensus is that scroll offset can be found in the
pageYOffset
and pageXOffset
properties of the self
or window
objects. However IE uses scrollTop
and scrollLeft
properties on thedocument.body
or document.documentElement
objects.
No comments:
Post a Comment