JavaScript获取浏览器窗口与屏幕属性详解

网页可见区域与正文尺寸获取

获取网页可见区域宽度，使用代码：document.body.clientWidth;

获取网页可见区域高度，使用代码：document.body.clientHeight;

获取包含边线的网页可见区域宽度，使用代码：document.body.offsetWidth;

获取包含边线的网页可见区域高度，使用代码：document.body.offsetHeight;

获取网页正文全文宽度，使用代码：document.body.scrollWidth;

获取网页正文全文高度，使用代码：document.body.scrollHeight;

获取网页被卷去的高度，使用代码：document.body.scrollTop;

获取网页被卷去的左侧距离，使用代码：document.body.scrollLeft;

获取网页正文部分距离屏幕顶部的距离，使用代码：window.screenTop;

获取网页正文部分距离屏幕左侧的距离，使用代码：window.screenLeft;

获取屏幕分辨率的高度，使用代码：window.screen.height;

获取屏幕分辨率的宽度，使用代码：window.screen.width;

获取屏幕可用工作区高度，使用代码：window.screen.availHeight;

获取屏幕可用工作区宽度，使用代码：window.screen.availWidth;

DOM元素滚动与偏移属性说明

scrollHeight属性用于获取对象的滚动高度。

scrollLeft属性用于设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop属性用于设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

scrollWidth属性用于获取对象的滚动宽度。

offsetHeight属性用于获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度。

offsetLeft属性用于获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。

offsetTop属性用于获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。

事件坐标与滚动位置计算

event.clientX表示相对文档的水平坐标。

event.clientY表示相对文档的垂直坐标。

event.offsetX表示相对容器的水平坐标。

event.offsetY表示相对容器的垂直坐标。

document.documentElement.scrollTop用于获取垂直方向滚动的值。

event.clientX加上document.documentElement.scrollTop，表示相对文档的水平坐标加上垂直方向滚动的量。

若要获取当前页面的滚动条纵坐标位置，应使用以下代码：

document.documentElement;

而不建议使用：

document.body.scrollTop;

这是因为documentElement对应的是html标签，而body对应的是body标签，两者在标准文档模式下表现不同。

以上内容涵盖了JavaScript中获取浏览器各种属性的常用方法，希望对学习或工作有所帮助。