js gets the various widths and heights of the browser and screen

1: Width and height of the visible area of ​​the web page, excluding toolbars and scroll bars (size of the visible area of ​​the browser window)

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

window.innerHeightThe inner height of the browser window;

window.innerWidthThe inner width of the browser window;

2. For IE8.7.6.5:

document.documentElement.clientHeight: Indicates the current height of the window where the HTML document is located;

document.documentElement.clientWidth: Indicates the current width of the window where the HTML document is located;

Or, because the body attribute of the document object corresponds to the 6c04bd5ca3fcae76e30b72ad730ca86d tag of the HTML document, it can also be expressed as:

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

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

Conclusion:

document.body.clientWidth/Height: The width and height are too small, and the height even defaults to 200;

document.documentElement.clientWidth/Height and window The width and height of .innerWidth/Height are always equal.

So the Javascripit solution that is practical in different browsers:

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

2: Full text width and height of the webpage text

scrollWidth and scrollHeight get the height and width of the web page content

1. For IE.Opera: scrollHeight is the actual height of the web page content, which can be smaller than clientHeight ;

2. For NS.firefox: scrollHeight is the height of the web page content, but the minimum value is clientHeight; that is to say, when the actual height of the web page content is less than clientHeight, scrollHeight returns clientHeight;

3. Browser compatibility code:

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

2: The width and height of the visible area of ​​the web page, including scroll bars and other edges (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 and down scroll bars + top and bottom borders;

2. Browser compatibility code:

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

3: The distance and offset of the web page scrolled

1 .scrollLeft:Set or get the distance between the left edge of the given object and the leftmost end of the currently visible content in the window;

2.scrollTop: Set or get the distance between the top of the given object and the left end of the currently visible content in the window;

3.offsetLeft:Setting Or get the calculated left position of the given object relative to the layout or the parent coordinate specified by the offsetParent property;

4.offsetTop:Set or get the position given The calculated top position of the specified object relative to the layout or the parent coordinate specified by the offsetParent attribute;

For more js related articles about obtaining various widths and heights of browsers and screens, please pay attention PHP Chinese website!