JavaScript 获取窗口与屏幕尺寸及位置参数详解

JavaScript 获取窗口与屏幕尺寸及位置参数详解

在 JavaScript 开发中，获取窗口（容器）的大小及位置涉及众多属性，容易混淆。此处对这些常用属性进行列举并做简要说明。

鼠标与元素坐标属性

clientX：表示鼠标点击位置相对于文档的水平坐标。

clientY：表示鼠标点击位置相对于文档的垂直坐标。

offsetX：表示元素相对于其容器的水平坐标。

offsetY：表示元素相对于其容器的垂直坐标。

scrollWidth：获取对象内容的实际滚动宽度。

scrollHeight：获取对象内容的实际滚动高度。

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

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

offsetWidth：获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

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

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

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

屏幕与窗口尺寸属性

屏幕分辨率的高：window.screen.height。

屏幕分辨率的宽：window.screen.width。

屏幕可用工作区高度（不包含任务栏）：window.screen.availHeight。

屏幕可用工作区宽度（不包含任务栏）：window.screen.availWidth。

网页可见区域宽（不包含滚动条和边框）：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。

文档类型对属性获取的影响

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> ，

当使用上述 XHTML 文档类型声明时，获取滚动和尺寸属性需进行替换：将 document.body.scrollTop 和 document.body.scrollLeft 改为 document.documentElement.scrollTop 和 document.documentElement.scrollLeft；同时，document.body.clientWidth 和 document.body.clientHeight 也应改为 document.documentElement.clientWidth 和 document.documentElement.clientHeight。

以上内容可能存在疏漏或未说明清楚之处，欢迎补充、讨论或查阅相关资料，共同提升。