Home > Developer > JavaScript
Test example:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Body {border: 10px solid red ;}
# Inner {width: 2000px; height: 2000px; border: 5px solid blue ;}
</Style>
</Head>
<Body>
<Div id = "inner"> </div>
</Body>
</Html>
Result:
Chrome:
FF
OPERA:
SAFARI:
IE9:
IE8
IE7:
IE6
Note:
Chrome/FF/Safari/opera
For these browsers, The innerWidth/innerHeight attribute of the window contains the visible area size of the entire document. Note that this size contains the size of the scroll bar.
We can directly use these two attributes without the influence of the scroll bar.
If the scroll bar is affected (for example, the maximize pop-up box), you should try another method.
The documentobject is the root of every domtree, but not an html element in the tree. The document.doc umentElement attribute references the html tag used as the root element of the document. The document. body attribute references the body tag.
Here we get three common values (scrollWidth, offsetWidth, and clientwidth) to compare them.
Document.doc umentElement. scrollWidth returns the width of the entire document.
Document.doc umentElement. offsetWidth returns the visible width of the entire document.
Document.doc umentElement. clientwidth returns the visible width (excluding the border) of the entire document. clientwidth = offsetWidth-borderWidth
In general, we will not set the border for document.doc umentElement, so the clientwidth here is consistent with offsetWidth.
Document. body. scrollWidth returns the width of the body.
Consistent umentElement. scrollWidth,
Opera and FF return the scrollWidth of the standard body. I personally think opera and FF are reasonable.
Document. body. offsetWidth: returns the offsetWidth of the body.
Document. body. clientwidth returns the clientwidth (excluding the border) of the body, clientwidth = offsetWidth-borderWidth
In the above example, we can see that some values of the body and documentElement are equal, which does not mean they are equivalent. However, when we do not set the width for the body, the document. body occupies the entire window width by default, so there are:
Document. body. scrollWidth = document.doc umentElement. scrollWidth
Document. body. offsetWidth = document.doc umentElement. offsetWidth
Document. body. clientwidth = document.doc umentElement. clientwidth-document. body. borderWidth (Border width of the body)
When we set a width for the body, the difference comes out.
IE9/IE8
The only difference between the two is that IE9 includes the window. innerWidth attribute, while IE8 does not include the window. innerWidth attribute.
Document.doc umentElement. scrollWidth returns the width of the entire document, which is consistent with that of browsers such as FF.
Document.doc umentElement. offsetWidth returns the visible width of the entire document (including the scroll bar with the same value as innerWidth). Note that the browser here is a little different from FF.
Document.doc umentElement. clientwidth returns the visible width (excluding the border) of the entire document, consistent with that of browsers such as FF. Clientwidth = offsetWidth-scroll bar width
Document. body. scrollWidth returns the width of the body,Note that the scrollWidth and FF browsers here are a little different. This does not include the border width of the body itself.
In this example, 10 PX is less than FF.
Document. body. offsetWidth: returns the offsetWidth of the body, which is consistent with that of browsers such as FF.
Document. body. clientwidth: return the clientwidth (excluding the border) of the body, which is consistent with that of browsers such as FF. clientwidth = offsetWidth-borderWidth
IE7
The main difference between IE7 and IE9/IE8 is
The first parameter document.doc umentElement. offsetWidth has different return values,
As mentioned above, the document.doc umentElement. offsetWidth of IE9/ie8contains the scroll bar,However, the document.doc umentElement. offsetWidth of ie7does not contain a scroll bar.
Second, document.doc umentElement. scrollWidth returns the width of the entire document,Note that this is inconsistent with IE9, IE8, FF, and other browsers. For IE9, IE8, and FF browsers, scrollWidth is not smaller than the window width, but there is no such restriction in IE. How small is the document and how small is it?
Others are quite the same.
Finally, it's IE6.
The returned values of document.doc umentElement in ie6are different from those of IE9/ie8({}}, IE7 is a wonderful effect for document.doc umentElement ).
Again, IE's document. body is a wonderful thing. When no width is set for the body, the body is filled with the entire document by default (note that other browsers are filled with the entire window). Of course, the minimum value indicates the size of the entire window, that is, the body points to the root element.
Therefore, the difference between IE6 and other browsers in terms of width resolution is obvious.
Document. body. scrollWidth: returns the width of the body, which is consistent with IE9, IE8, and IE7.
Document. body. offsetWidth returns the offsetWidth of the body. Note that due to the different bodies, offsetWidth = scrollWidth + borderWidth
Document. body. clientwidth returns the clientwidth (excluding the border) of the body. clientwidth = offsetWidth-borderWidth
In addition, when the same sample as ie7, the parameter document.doc umentElement. scrollWidth has no minimum width limit.
To sum up, in standard mode, we can obtain the visible area of the document as follows:
Copy codeThe Code is as follows:
Function getViewSizeWithoutScrollbar () {// does not contain a scroll bar
Return {
Width: document.doc umentElement. clientWidth,
Height: document.doc umentElement. clientHeight
}
}
Function getViewSizeWithScrollbar () {// contains the scroll bar
If (window. innerWidth ){
Return {
Width: window. innerWidth,
Height: window. innerHeight
}
} Else if(document.doc umentElement. offsetWidth = document.doc umentElement. clientWidth ){
Return {
Width: document.doc umentElement. offsetWidth,
Height: document.doc umentElement. offsetHeight
}
} Else {
Return {
Width: document.doc umentElement. clientWidth + getScrollWith (),
Height: document.doc umentElement. clientHeight + getScrollWith ()
}
}
}
GetScrollWith () is to get the size of the scroll bar, see
Http://www.jb51.net/article/29036.htm
Are there any errors?
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
