Results:
Chrome:
Ff
OPERA:
Safari:
IE9:
IE8
IE7:
IE6
Description
Chrome/ff/safari/opera
For these browsers, window has a property innerwidth/innerheight that contains the viewable area dimensions of the entire document, and note that this dimension contains the scroll bar size.
If we do not count the effect of the scroll bar, we can use these two properties directly.
If the scroll bar affects (such as maximizing the pop-up), then you should think of another way.
The Document object is the root of each DOM tree, but it does not represent an HTML element in the tree, the Document.documentelement property references the HTML tag that is the root element of the document, and the Document.body attribute references the body tag
Here we get the common three values (ScrollWidth, offsetwidth and clientwidth) to compare
Document.documentElement.scrollWidth returns the width of the entire document
Document.documentElement.offsetWidth returns the visible width of the entire document
Document.documentElement.clientwidth returns the visible width of the entire document (does not contain a border), clientwidth = Offsetwidth-borderwidth
But generally speaking, we do not give document.documentelement to set the border, so here's clientwidth and offsetwidth consistent
Document.body.scrollWidth returns the width of the body
Note that there is an inconsistency in the ScrollWidth, and the WebKit browser (Chrome and Safari) returns the width of the entire document, which is consistent with Document.documentElement.scrollWidth,
Opera and FF return is the standard body of the scrollwidth, personally think Opera and FF is more reasonable.
Document.body.offsetWidth returns the offsetwidth of the body
Document.body.clientwidth returns the clientwidth of the body (does not contain a border), clientwidth = Offsetwidth-borderwidth
We look at the example above and find that some of the values of body and documentelement are equal, which does not mean that they are equivalent. But because when we don't set the width of the body, document.body by default fills the width of the entire window, so there are:
Document.body.scrollWidth = Document.documentElement.scrollWidth
Document.body.offsetWidth = Document.documentElement.offsetWidth
Document.body.clientwidth = Document.documentelement.clientwidth-document.body.borderwidth (The border width of the body)
When we set the body to a width, the difference comes out.
Ie9/ie8
The only difference is that the IE9 contains the Window.innerwidth attribute, and the IE8 does not contain the Window.innerwidth attribute.
Document.documentElement.scrollWidth returns the width of the entire document, consistent with browsers such as FF
Document.documentElement.offsetWidth returns the visible width of the entire document (including scroll bars, values and innerwidth), and note that there is a difference between the browsers here and FF.
Document.documentElement.clientwidth returns the visible width of the entire document (without Borders), consistent with browsers such as FF. ClientWidth = offsetwidth-scroll bar width
Document.body.scrollWidth returns the width of the body,Note that there is a difference between the scrollwidth and FF browsers, and this does not include the border width of the body itself.
So in the example, the FF is less than 10px.
Document.body.offsetWidth returns the body of the offsetwidth, and FF and other browsers consistent
Document.body.clientwidth returns the body of the clientwidth (not including the border), and FF and other browsers consistent, clientwidth = Offsetwidth-borderwidth
IE7
The main difference between IE7 and IE9/IE8 is
First, the return value of the document.documentElement.offsetWidth is not the same,
See above, IE9/IE8 's document.documentElement.offsetWidth contains scroll bars,However, the IE7 document.documentElement.offsetWidth does not contain scroll bars.
Second, document.documentElement.scrollWidth return the entire width of the document, Note that here and IE9/IE8, FF and other browsers are inconsistent, for IE9/IE8, FF and other browsers, ScrollWidth minimum is not less than the width of the window, but in IE without this limit, how small the document, this is how small
Others are quite consistent.
Finally, it's IE6.
The document.documentelement return value of IE6 is no different from IE9/IE8 (this shows that for Document.documentelement,ie7 is a wonderful thing).
In other words, ie document.body is a wonderful thing, when the body is not set width, the body is the default for the entire document (note that all other browsers are occupied by the entire window), of course, the minimum is the size of the entire window, that is, the body points to the root element.
Therefore, in the calculation of IE6 in the resolution of the width of the bug, and other browsers the difference is incisively and vividly.
Document.body.scrollWidth returns the width of the body, consistent with IE9/IE8/IE7
Document.body.offsetWidth return to the body of the offsetwidth, note that due to the body of the different, here's offsetwidth = ScrollWidth + borderwidth
Document.body.clientwidth returns the clientwidth of the body (does not contain a border) ClientWidth = Offsetwidth-borderwidth
In addition, one point is the same as IE7, that is, Document.documentElement.scrollWidth has no minimum width limit.
To sum up, in standard mode, we get the visible area of the document as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
