Get browser Height window height element size Offset Property

Screen.widthscreen.height
Screen.availheight//Get the screen height after removing the status bar screen.availwidth  //Get the screen height after removing the status bar

first, the size of the screen through the browser

Second, get the browser window content size

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    get the size of the content via the BODY element */

Three, the difference of the scroll bar support

A page that does not make any scroll bar changes, firefox/ie defaults to the HTML element that has a ScrollBar property. And the body does not have.
Chrome, however, considers the body to have a scrollbar property.
So the wording of compatibility is:

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

Iv. getting the dimensions of the element

elemnt.offsetwidthelemnt.offsetheight//only IE5 not supported, use it with ease

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]

V. Offset properties of elements

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

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

*offsetleft can get the distance from the left side of the offset reference parent element from the element above it. Includes: Margin[left] + Left

* Note that there are compatibility issues with the offsetparent in Ie6/7, with Ie8/ff/ch:

In ff/chrome/ie8+:

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

If the current element is not positioned, the default is the body as the final reference parent element.

In IE6/7:

The offset reference parent element is the parent element at the top level, regardless of whether it is positioned.

Overall:

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

　　

Compatibility wording

    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 {' Top ': topvalue, ' left ': leftvalue, ' distant ': far}    }/*  * Top the current element is the distance from the top of the BODY element.  * The distance to the left of the current element from the BODY element.  * Far  returns the final reference parent element. */

Get browser Height window height element size Offset Property