Js to get the page height and width, we can use document. body. offsetHeight (including the height of the edge) and document. body. offsetWidth (including the edge width) is enough. The specific example is as follows.
View the difference using the following code
| The Code is as follows: |
Copy code |
"Alert (" visible area width: document. body. clientWidth: "+ document. body. clientWidth + "n visible area of Web Page high: document. body. clientHeight: "+ document. body. clientHeight + "n visible area width of webpage: document. body. offsetWidth (including the edge width): "+ document. body. offsetWidth + "n visible area of Web Page high: document. body. offsetHeight (including the height of the edge): "+ document. body. offsetHeight + "n web page text width: document. body. scrollWidth: "+ document. body. scrollWidth + "n web page text Height: document. body. scrollHeight: "+ document. body. scrollHeight + "n webpage volume Height: document. body. scrollTop: "+ document. body. scrollTop + "n page to the left of the volume: document. body. scrollLeft: "+ document. body. scrollLeft + "n webpage body part: window. screenTop: "+ window. screenTop + "n webpage text section left: window. screenLeft: "+ window. screenLeft + "n screen resolution Height: window. screen. height: "+ window. screen. height + "n screen resolution width: window. screen. width: "+ window. screen. width + "n available workspace Height: window. screen. availHeight: "+ window. screen. availHeight + "n available workspace width: window. screen. availWidth: "+ window. screen. availWidth ); |
Use the following code
| The Code is as follows: |
Copy code |
"Alert (" visible area width of the webpage: document. body. clientWidth: "+ document. body. clientWidth );
Alert ("visible area height of webpage: document. body. clientHeight:" + document. body. clientHeight );
Alert ("visible area width of the webpage: document. body. offsetWidth (including the width of the edge):" + document. body. offsetWidth );
Alert ("visible area height of the webpage: document. body. offsetHeight (including the height of the edge):" + document. body. offsetHeight );
Alert ("webpage body full text width: document. body. scrollWidth:" + document. body. scrollWidth );
Alert ("webpage text height: document. body. scrollHeight:" + document. body. scrollHeight );
Alert ("the height of the webpage to be rolled: document. body. scrollTop:" + document. body. scrollTop );
Alert ("Left of the webpage to be rolled: document. body. scrollLeft:" + document. body. scrollLeft );
Alert ("window. screenTop:" + window. screenTop );
Alert ("window. screenLeft:" + window. screenLeft );
Alert ("screen Resolution height: window. screen. height:" + window. screen. height );
Alert ("screen Resolution width: window. screen. width:" + window. screen. width );
Alert ("available screen workspace Height: window. screen. availHeight:" + window. screen. availHeight );
Alert ("available workspace width: window. screen. availWidth:" + window. screen. availWidth ); |
The following figure is displayed directly at the specified position on the html page:
| The Code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> js obtains the summary of height and width. </title>
<Meta content = "text/html; charsets = UTF-8" http-equiv = "Content-Type"/>
<Script type = "text/javascript" src = "js/jquery-1.5.2.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function ()
{
Alert ("visible area height of the current browser window:" + $ (window). height (); // The visible area height of the current browser window
Alert ("height of the current window document in the browser:" + $ (document). height (); // height of the current window document in the browser
Alert ("height of the current window document body in the browser:" + $ (document. body). height (); // height of the current window document body in the browser
Alert ("the total height of the current browser window document body includes border padding margin:" + $ (document. body ). outerHeight (true); // the total height of the current window document body in the browser includes border padding margin.
Alert ("width of visible area of the current browser window:" + ($ (window). width (); // width of visible area of the current browser window
Alert ("browser current window document Object width:" + $ (document). width (); // browser current window document Object width
Alert ("height of the current window document body in the browser:" + $ (document. body). width (); // height of the current window document body in the browser
Alert ("the total width of the current browser window document body includes border padding margin:" + $ (document. body ). outerWidth (true); // The total width of the current file body in the browser window includes border padding margin.
Alert ("display resolution, which can only be obtained using JavaScript code:" + screen. height); // display resolution, which can only be obtained using JavaScript code
Alert ("display resolution, which can only be obtained using JavaScript code:" + screen. width );
});
</Script>
</Head>
<Body>
<Ul>
<Li> visible area width: document. body. clientWidth </li>
<Li> visible area height: document. body. clientHeight </li>
<Li> visible area width of the webpage: document. body. offsetWidth (including the width of the edge) </li>
<Li> visible area height: document. body. offsetHeight (including the height of edges) </li>
<Li> webpage text width: document. body. scrollWidth </li>
<Li> webpage text height: document. body. scrollHeight </li>
<Li> webpage volume height: document. body. scrollTop </li>
<Li> left of the webpage to be rolled: document. body. scrollLeft </li>
<Li> webpage body part: window. screenTop </li>
<Li> webpage body part left: window. screenLeft </li>
<Li> screen resolution height: window. screen. height </li>
<Li> screen resolution width: window. screen. width </li>
<Li> available screen workspace Height: window. screen. availHeight </li>
<Li> available workspace width: window. screen. availWidth </li>
</Ul> </Body>
</Html> |
