Native JS obtains the size summary of browsers, windows, and elements.

1. Obtain the screen size through a browser

Screen. width
Screen. height

Screen. availHeight // Obtain the screen height after removing the status bar
Screen. availWidth // Obtain the screen height after removing the status bar

2. Obtain the size of the browser window content

// Height
Window. innerHeight | document.doc umentElement. clientHeight | document. body. clientHeight

// Width
Window. innerWidth | document.doc umentElement. clientWidth | document. body. clientWidht

/*
* Window. innerHeight FF/CH is supported to obtain the window size.
* Document.doc umentElement. clientHeight IE/CH support
* Document. body. client obtains the size of the content through the body element.

*/


3. Differences supported by the scroll bar

For pages without any scroll bar changes, Firefox/IE considers the HTML element to have the scroll bar attribute by default. The body does not.
However, Chrome regards the body as having the scroll bar attribute.
Therefore, the compatibility statement is as follows:

Document.doc umentElement. scrollTop | document. body. scrollTop


4. Obtain the element size

Elemnt. offsetWidth
Elemnt. offsetHeight

// This is not supported only by IE5. Feel free to use it.

Illustration:

* OffsetWidth can be used to obtain the height of an element, including width + padding [left, right] + border [left, right].
* OffsetHeight can be used to obtain the width of an element, including height + padding [top, bottom] + bottom [top, bottom].

5. Offset attribute of elements

Element. offsetTop // Obtain the distance between the element and its offset. See the distance between the parent element and its top.
Element. offsetLeft // Obtain the distance between the element and its offset. See the left-side distance of the parent element.
Element. offsetParent // Obtain the reference parent element of the current element.


* OffsetTop can be used to obtain the distance between an element and its upper-level offset, referring to the distance at the top of the parent element. Including: margin [top] + top
* OffsetLeft can be used to obtain the distance between an element and its upper-level offset, referring to the left distance of the parent element. Including: margin [left] + left
* Note that offsetParent is in IE6/7 and has compatibility issues with IE8/FF/CH:

In FF/Chrome/IE8 +:
If the current element has a location, the offset refers to the location element closest to the parent element at the upper level.
If the current element is not located, the final reference parent element is body by default.

In IE6/7:
Whether there is any location, its offset reference parent element is its parent element at the upper level.

In general:
Whether it is FF/Chrome or IE, the final reference parent element is a body element. Therefore, the compatible method is to get the offset value from the current element to the body element.

Compatibility

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, 'far': Far}
}

/*
* Top the distance between the current element and the top of the body element.
* Left: the distance between the current element and the left of the body element.
* Far returns the final reference parent element.
*/



How to get the size of various browser windows using JS

Frequently used:
JS to get the browser window size

// Obtain the window width
If (window. innerWidth)
WinWidth = window. innerWidth;
Else if (document. body) & (document. body. clientWidth ))
WinWidth = document. body. clientWidth;
// Obtain the window height
If (window. innerHeight)
WinHeight = window. innerHeight;
Else if (document. body) & (document. body. clientHeight ))
WinHeight = document. body. clientHeight;
// Detects the body in the Document to obtain the window size.
If (document.doc umentElement & document.doc umentElement. clientHeight & document.doc umentElement. clientWidth)
{
WinHeight = document.doc umentElement. clientHeight;
WinWidth = document.doc umentElement. clientWidth;
}


Details:
For details about obtaining the visible window size of various browsers:
<Script>
Function getInfo ()
{
Var s = "";
S = "visible area width of the webpage:" document. body. clientWidth;
S = "visible area of the webpage:" document. body. clientHeight;
S = "visible area width of the webpage:" document. body. offsetWidth "(including the width of the edge and the scroll bar )";
S = "visible area height of the webpage:" document. body. offsetHeight "(including the width of the Edge )";
S = "webpage body full text width:" document. body. scrollWidth;
S = "webpage text height:" document. body. scrollHeight;
S = "page size (ff):" document. body. scrollTop;
S = "webpage volume high (ie):" document.doc umentElement. scrollTop;
S = "left of the webpage volume:" document. body. scrollLeft;
S = "page body part:" window. screenTop;
S = "webpage body part left:" window. screenLeft;
S = "screen resolution height:" window. screen. height;
S = "screen resolution width:" window. screen. width;
S = "screen available workspace height:" window. screen. availHeight;
S = "available screen workspace width:" window. screen. availWidth;

S = "your screen is set to" window. screen. colorDepth "color ";
S = "your screen settings" window. screen. deviceXDPI "pixels/inches ";
// Alert (s );
}
GetInfo ();
</Script>

In my local test:
It can be used in IE, FireFox, and Opera
Document. body. clientWidth
Document. body. clientHeight
It is very simple and convenient.
In the company's projects:

Opera is still in use
Document. body. clientWidth
Document. body. clientHeight

However, IE and FireFox use
Document.doc umentElement. clientWidth
Document.doc umentElement. clientHeight

It turned out to be W3C standards.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If you add this line of tag to the page, you can add it to IE:
Document. body. clientWidth ==> BODY object width
Document. body. clientHeight ==> BODY object height
Document.doc umentElement. clientWidth ==> visible area width
Document.doc umentElement. clientHeight => visible area height

In FireFox:
Document. body. clientWidth ==> BODY object width
Document. body. clientHeight ==> BODY object height
Document.doc umentElement. clientWidth ==> visible area width
Document.doc umentElement. clientHeight => visible area height
 

In Opera:
Document. body. clientWidth ==> visible area width
Document. body. clientHeight ==> visible area height
Document.doc umentElement. clientWidth ==> page object width (that is, the width of the BODY object plus the Margin width)
Document.doc umentElement. clientHeight ==> Page Object height (that is, the height of the BODY object plus the Margin height)
If W3C standards are not defined

IE:
Document.doc umentElement. clientWidth ==> 0
Document.doc umentElement. clientHeight => 0

FireFox:
Document.doc umentElement. clientWidth ==> page object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)

Opera:
Document.doc umentElement. clientWidth ==> page object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)