JS get Browser Height window height element Dimension Offset Property method _javascript Tips

As shown below:

Screen.width
screen.height


screen.availheight//Get screen height after removing status bar
screen.availwidth//Get screen height after removing status bar

First, the size of the screen to get through the browser

Second, get the size of the browser window content

Height
window.innerheight | | document.documentElement.clientHeight | | document.body.clientHeight

//width
window.innerwidth | | document.documentElement.clientWidth | | | document.body.clientWidht

/* 
 Window.innerheight  ff/ch Support, get window size.
 * Document.documentElement.clientHeight  IE/CH Support
 * document.body.client  to get the dimensions of content through the BODY element

*/

Third, the difference of the scroll bar support

A page that does not make any scroll bar changes, and firefox/ie that the HTML element has scroll bar properties by default. And the body does not have.

But Chrome thinks the body has scroll bar properties.

So the writing of compatibility is:

Document.documentElement.scrollTop | | Document.body.scrollTop

Iv. get the dimensions of the element

Elemnt.offsetwidth
elemnt.offsetheight

//Only IE5 not support, rest assured use it

Description Diagram:

　　

* Offsetwidth can get the height dimension of the element, including: Width + padding[left,right] + border[left,right]

* Offsetheight can get the width dimension of the element, including: Height + Padding[top,bottom] + Bottom[top,bottom]

The offset attribute of the element

Element.offsettop//Gets the interval distance between the element and its offset reference parent element
Element.offsetleft//Gets the interval between the element and the left of its offset reference parent element
Element.offsetparent Gets the reference parent element of the current element

*offsettop can get the distance at the top of the parent element from the offset of the element's previous level. Includes: Margin[top] + top

*offsetleft can get the distance from the first level of an element's offset to the left of the parent element. Includes: Margin[left] + Left

* Note that there are compatibility issues with offsetparent in IE6/7 and ie8/ff/ch:

In ff/chrome/ie8+:

If the current element has a location, the offset reference parent element is the nearest positioned element at the top level.

If the current element is not positioned, it defaults to the body as the final reference parent element.

In IE6/7:

With or without positioning, the offset reference parent element is the parent element at the top level.

Overall:

Whether ff/chrome or IE, the final reference to the parent element is the BODY element, so the compatible method is to get the current element to the BODY element offset position value.

Compatibility notation

function Getoffestvalue (elem) {

    var Far = null;
    var topvalue = elem.offsettop;
    var leftvalue = elem.offsetleft;
    var offsetfar = elem.offsetparent;

    while (Offsetfar) {
      alert (offsetfar.tagname)
      topvalue + = offsetfar.offsettop;
      Leftvalue + = Offsetfar.offsetleft;
      Far = Offsetfar;
      Offsetfar = offsetfar.offsetparent;
    }
    return {' tops ': topvalue, ' left ': leftvalue, ' Far ': Far}
  }

/
 * Top the current element is the distance from the BODY element.
 * Left current element distance from the left-hand side of the BODY element.
 * Far Returns the final reference parent element.
*/

The above JS get browser height window height element Size Offset property is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud habitat community.