Source: http://www.ido321.com/906.html
In W3school's introduction to the Window object, there are three ways to get the browser window size (the browser viewport, excluding toolbars and scroll bars).
For Internet Explorer, Chrome, Firefox, Opera, and Safari:
- window.innerheight– the internal height of the browser window
- window.innerwidth– The interior width of the browser window
For Internet Explorer 8, 7, 6, 5:
- Document.documentElement.clientHeight
- Document.documentElement.clientWidth
Or
- Document.body.clientHeight
- Document.body.clientWidth
Practical JavaScript scenarios (all browsers included):
1:var w=window.innerwidth
2: | | | document.documentElement.clientWidth
3: | | | document.body.clientWidth;
4:
5:var h=window.innerheight
6: | | | document.documentElement.clientHeight
7: | | | document.body.clientHeight;
All returned are numeric values, with no units. This is in common. Okay, next, look at their differences.
1:<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2:<htmlxmlns= "http://www.w3.org/1999/xhtml" >
3:<head>
4:<Metahttp-equiv= "Content-type"Content = "text/html; charset=utf-8"/>
5:<title> Untitled document </title>
6:<styletype= "Text/css">
7: . Test
8: {
9: width:100px;
Ten: height:100px;
One : background:red;
: }
: #data
: {
: width:200px;
: height:100px;
: }
:</style>
:</head>
20:
:<body>
:<Divclass= "Test">Test</ Div >
:<Divid= "Data"></ div>
:</body>
:</html>
JS Code
1:var w=window.innerwidth
2: | | | document.documentElement.clientWidth
3: | | | document.body.clientWidth;
4:var h=window.innerheight
5: | | | document.documentElement.clientHeight
6: | | | document.body.clientHeight;
7:
8:var data = document.getElementById (' data ');
9:"Normal document Flow condition:"+"<br/>";
Ten:"w=" +w+ "<br/>";
One :"h="+h+"<br/>";
:"document.body.clientheight=" +document.body.clientheight+"<br/>";
:"document.body.clientwidth=" +document.body.clientwidth+ "<br/>";
:"window.innerwidth=" +window.innerwidth+ "<br/>";
:"window.innerheight=" +window.innerheight+"<br/>";
:"document.documentelement.clientheight="+document.documentelement.clientheight+ "<br/>";
+ :"document.documentelement.clientwidth="+ document.documentelement.clientwidth+"<br/>";
Look at the result output: (PS: Computer resolution is 1366*768)
Add left float to. Test: Float:left to get out of the normal flow of the document and see the result:
In addition to the document.body.clientHeight became 100, the other basic remained unchanged.
But add float:left to. data, and in the corresponding browser,document.body.clientHeight becomes 0, and the rest remains the same . Don't believe you can try it yourself.
About *top, *left, *width, *height in javascript: http://www.ido321.com/911.html
Document.body, document.documentelement, and window get the difference between window size