JavaScript gets the browser height and width values (documentelement,clientheight,offsetheight,scrollheight,scrolltop,offsetparent,offsety, Innerheight)

Source: Internet
Author: User

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 ==> The width of the page object (that is, the body object width plus the margin width)

Document.documentElement.clientHeight ==> Page Object height (i.e. body object height plus margin height)

There is no standard for defining the

IE is:

Document.documentElement.clientWidth ==> 0


Document.documentElement.clientHeight ==> 0

Firefox is:

Document.documentElement.clientWidth ==> The width of the page object (that is, the body object width plus the margin width)

Document.documentElement.clientHeight ==> Page Object height (i.e. body object height plus margin height)

Opera is:

Document.documentElement.clientWidth ==> The width of the page object (that is, the body object width plus the margin width)

Document.documentElement.clientHeight ==> Page Object height (i.e. body object height plus margin height)

Web page Visible area width: document.body.clientWidth
Web page Visible Area height: document.body.clientHeight
Web page Visible Area width: document.body.offsetWidth (including edge width)
Web page Visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
Page body Full text High: Document.body.scrollHeight
Page is rolled away High: document.body.scrollTop
Webpage is rolled away left: document.body.scrollLeft
Page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available work area height: window.screen.availHeight
Screen available work area width: window.screen.availWidth

(Note: The margin attribute in CSS has nothing to do with ClientWidth, offsetwidth, ClientHeight, offsetheight)

HTML precise positioning: ScrollLeft, ScrollWidth, ClientWidth, offsetwidth

ScrollWidth ==> Gets the scrolling width of the object
ScrollHeight ==> Gets the scroll height of the object
ScrollLeft ==> Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window ( left to be rolled )
ScrollTop ==> Sets or gets the distance between the top of the object and the top of the visible content in the window (the height being rolled away )
Offsetleft ==> Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property
OffsetTop ==> gets the calculated top position of the object relative to the layout or parent coordinates specified by the OffsetTop property
Offsetheight ==> Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property

Event.clientx horizontal coordinates of ==> relative documents

Event.clienty ==> Vertical coordinates of relative documents

Event.offsetx ==> relative to the container's horizontal coordinates

Event.offsety ==> The vertical coordinate of the relative container

Document.documentElement.scrollTop ==> Vertical Scrolling value

Event.clientx+document.documentelement.scrolltop ==> Horizontal coordinates of relative documents + amount of vertical scrolling

Implementation code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

attached HTML test code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Summary

Browser viewport height function windowheight () {var myheight = 0;    if (typeof (window.innerheight) = = ' number ') {//non-ie myheight = window.innerheight; } else if (Document.documentelement && (document.documentElement.clientHeight)) {//ie 6+ in ' standards com    pliant mode ' myheight = document.documentElement.clientHeight; } else if (Document.body && (document.body.clientHeight)) {//ie 4 compatible myheight = Document.bo    Dy.clientheight; } return myheight;}    Browser viewport width function windowwidth () {var mywidth = 0;    if (typeof (window.innerwidth) = = ' number ') {//non-ie mywidth = window.innerwidth; } else if (Document.documentelement && (document.documentElement.clientWidth)) {//ie 6+ in ' standards Comp    Liant mode ' mywidth = document.documentElement.clientWidth; } else if (Document.body && (document.body.clientWidth)) {//ie 4 compatible mywidth = DocumeNt.body.clientWidth; } return mywidth;}    /**** Browser vertical scroll position ****/function scrolly () {var de = document.documentelement; return Window.pageyoffset | | (de && de.scrolltop) | | Document.body.scrollTop;}    /**** Browser horizontal scrolling position ****/function scrollx () {var de = document.documentelement; return Window.pagexoffset | | (de && de.scrollleft) | | Document.body.scrollLeft;} /**** Current Page height ****/function pageheight () {return document.body.scrollHeight;} /**** Current page width ****/function pagewidth () {return document.body.scrollWidth;}

JavaScript Gets the browser height and width values (documentelement,clientheight,offsetheight,scrollheight,scrolltop,offsetparent,offsety , Innerheight)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.