JS gets the size of the viewable area of the browser

The so-called viewable area refers to the area that can be seen, that is, the area of the page (height and width) that can be seen in the browser. Just using Document.body.clientHeight to get the height of the viewable area is the height of the entire document, and then in an article in cnblogs.com, I learned that you need to pass Document.documentElement.clientHeight to get to the height of the viewable area of the browser, and by the way, take the article off, as follows:

In IE without declaring doctype, the browser display window size can only be obtained from the following:

12	document.body.offsetWidthdocument.body.offsetHeight

In a browser that declares DOCTYPE, you can use the following to get the browser display window size:

12	document.documentElement.clientWidthdocument.documentElement.clientHeight

Ie,ff,safari supports this method, although opera supports this property, but returns the page size;

At the same time, all browsers except IE save this information in the Window object, which can be obtained using the following:

12	window.innerWidthwindow.innerHeight

Web page Visible Area High: document.body.offsetWidth;  Include the width of the edge
Web page Visible Area High: document.body.offsetHeight; Include the width of the edge


The page was rolled High: document.body.scrollTop;
The webpage is rolled away left: document.body.scrollLeft;


High screen resolution: window.screen.height;
Width of screen resolution: Window.screen.width;

Screen available working area width: window.screen.availWidth;

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。 y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

JS gets the size of the viewable area of the browser