Home > Web Front-end > JS Tutorial > body text

JavaScript method to get page height

高洛峰
Release: 2016-11-25 11:56:26
Original
965 people have browsed it

<script><br>function getInfo()<br>{<br> var s = "";<br> s += " Visible area width of web page: "+ document.body.clientWidth;<br> s += " Visible area height of web page: "+ document .body.clientHeight;<br> s += "The width of the visible area of ​​the webpage: "+ document.body.offsetWidth + " (including the width of the edges and scroll bars)";<br> s += "The height of the visible area of ​​the webpage: "+ document.body .offsetHeight + " (including the width of the edge)";<br> s += " Full text width of the web page body: "+ document.body.scrollWidth;<br> s += " Full text height of the web page body: "+ document.body.scrollHeight;<br> s += " The height at which the web page is scrolled (ff): "+ document.body.scrollTop;<br> s += " The height at which the web page is scrolled (ie): "+ document.documentElement.scrollTop;<br> s += " Web page The scrolled left: "+ document.body.scrollLeft;<br> s += " The main body of the web page: "+ window.screenTop;<br> s += " The left side of the main body of the web page: "+ window.screenLeft;<br> s += " The height of the screen resolution: "+ window.screen.height;<br> s += " The width of the screen resolution: "+ window.screen.width;<br> s += " The height of the screen's available work area: "+ window.screen .availHeight;<br> s += " Screen available work area width: "+ window.screen.availWidth;<br> s += " Your screen setting is "+ window.screen.colorDepth +" bit color";<br> s += " Your screen settings "+ window.screen.deviceXDPI +" pixels/inch";<br> //alert (s);<br>}<br>getInfo();<br></script>
In my local test:
In IE, You can use
document.body.clientWidth
document.body.clientHeight
to get it under FireFox and Opera. It is very simple and convenient.
In company projects:
Opera still uses
document.body.clientWidth
document.body.clientHeight
But IE and FireFox use
document.documentElement.clientWidth
document.documentElement.clientHeight
It turns out that the W3C standard is causing trouble Ah

If in If you add this line of tags to the page
In IE:
document.body.clientWidth ==> BODY object width
document.body.clientHeight ==> BODY object height
document.documentElement.clientWidth ==> Visible area Width
document.documentElement.clientHeight ==> Visible area height
In FireFox:
document.body.clientWidth ==> BODY object width
document.body.clientHeight ==> BODY object height
document.documentElement. clientWidth ==> Visible area width
document.documentElement.clientHeight ==> Visible area height

In Opera:
document.body.clientWidth ==> Visible area width
document.body.clientHeight == > Visible area height
document.documentElement.clientWidth ==> Page object width (i.e. BODY object width plus Margin width)
document.documentElement.clientHeight ==> Page object height (i.e. BODY object height plus Margin height) )
And if there is no W3C standard defined,
IE is:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox is:
document.documentElement.clientWidth ==> ; Page object width (that is, BODY object width plus Margin width) document.documentElement.clientHeight ==> Page object height (that is, BODY object height plus Margin height)
Opera is:
document.documentElement.clientWidth ==> Page object width (that is, BODY object width plus Margin width) document.documentElement.clientHeight ==> Page object height (that is, BODY object height plus Margin height)


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!