Js to get the various width and height of the browser and Screen

This article mainly introduces js methods for obtaining the width and height of browsers and screens, which has good reference value. Let's take a look at it below. I. visible area width and height of the webpage, excluding the toolbar and scroll bar (visible area size of the browser window)

1. For IE9 +, chrome, firefox, Opera, and Safari:

Window. innerHeight the internal height of the browser window;

Window. innerWidth the internal width of the browser window;

2. For IE8.7.6.5:

Document.doc umentElement. clientHeight: The current height of the window where the HTML document is located;

Document.doc umentElement. clientWidth: The current width of the window where the HTML document is located;

Or, because the body attribute of the document Object corresponds toLabel, so it can also be expressed:

Document. body. clientHeight: The current height of the window where the HTML document is located;

Document. body. clientWidth: The current width of the window where the HTML document is located;

Conclusion:

Document. body. clientWidth/Height: the width and Height are too small. The Height is even 200 by default;

Document.doc umentElement. clientWidth/Height is always the same as the width and Height of window. innerWidth/Height.

So the Javascripit solution is practical in different browsers:

var w = document.documentElement.clientWidth || document.body.clientWidth;var h = document.documentElement.clientHeight || document.body.clientHeight;

Ii. width and height of the webpage text

ScrollWidth and scrollHeight get the webpage content height and width

1. for IE. Opera:ScrollHeight is the actual height of the webpage content, which can be smaller than clientHeight;

2. For NS. firefox:ScrollHeight is the height of the webpage content, but the minimum value is clientHeight. That is to say, when the actual height of the webpage content is smaller than clientHeight, scrollHeight returns clientHeight;

3. browser compatible code:

var w = document.documentElement.scrollWidth || document.body.scrollWidth;var h = document.documentElement.scrollHeight || document.body.scrollHeight;

2. visible area width and height of the webpage, including the same side of the scroll bar (will change with the display size of the window)

1. value:OffsetWidth = scrollWidth + left and right scroll bars + Left and Right borders;

OffsetHeight = scrollHeight + up/down scroll bar + up/down border;

2. browser compatibility code:

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

3. Distance and offset of page volume removal

1. scrollLeft:Sets or obtains the distance between the left border of the specified object and the leftmost end of the currently visible content in the window;

2. scrollTop:Sets or obtains the distance between the top of a given object and the leftmost side of the currently visible content in the window;

3. offsetLeft:Sets or obtains the left-side position for calculation of the given object relative to the layout or the parent coordinate specified by the offsetParent attribute;

4. offsetTop:Sets or obtains the top position of the calculation of the given object relative to the layout or the parent coordinate specified by the offsetParent attribute;

For more js articles about various width and height of browsers and screens, refer to PHP!