JavaScript 网页定位属性详解：clientWidth、scrollHeight 与跨浏览器差异

网页可见区域与滚动属性基础

获取网页可见区域宽度的属性为 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 获取。

HTML 精确定位与事件坐标

HTML 精确定位涉及 scrollLeft、scrollWidth、clientWidth 和 offsetWidth 等属性。scrollHeight 用于获取对象的滚动高度。scrollLeft 用于设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。scrollTop 用于设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。scrollWidth 用于获取对象的滚动宽度。offsetHeight 用于获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。offsetLeft 用于获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。offsetTop 用于获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。event.clientX 表示相对文档的水平座标，event.clientY 表示相对文档的垂直座标。event.offsetX 表示相对容器的水平坐标，event.offsetY 表示相对容器的垂直坐标。document.documentElement.scrollTop 表示垂直方向滚动的值。相对文档的水平座标加上垂直方向滚动的量，可通过 event.clientX + document.documentElement.scrollTop 计算得出。

IE 与 FireFox 的布局差异

IE 与 FireFox 在定位属性上的行为存在如下差异：

在 IE6.0 及 FF1.06+ 版本中：

clientWidth 的计算结果为 width 加上 padding。

clientHeight 的计算结果为 height 加上 padding。

offsetWidth 的计算结果为 width 加上 padding 再加上 border。

offsetHeight 的计算结果为 height 加上 padding 再加上 border。

在 IE5.0/5.5 版本中：

clientWidth 的计算结果为 width 减去 border。

offsetWidth 的计算结果仅为 width。

offsetHeight 的计算结果仅为 height。

需要特别说明的是，CSS 中的 margin 属性与 clientWidth、offsetWidth、clientHeight、offsetHeight 均无关。

=====================================================

DOCTYPE 声明对定位的影响

在项目中更换页面版式后，发现部分 JavaScript 代码失效。通过 document.documentElement.clientWidth 语句获得的页面宽度为 0。经排查发现，新页面缺少对 W3C 标准的引用，导致 document.documentElement.clientWidth 失效。

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

如果在页面中添加上述 DOCTYPE 标记：

在 IE 浏览器中：document.body.clientWidth 对应 BODY 对象宽度，document.body.clientHeight 对应 BODY 对象高度，document.documentElement.clientWidth 对应可见区域宽度，document.documentElement.clientHeight 对应可见区域高度。在 FireFox 浏览器中：document.body.clientWidth 对应 BODY 对象宽度，document.body.clientHeight 对应 BODY 对象高度，document.documentElement.clientWidth 对应可见区域宽度，document.documentElement.clientHeight 对应可见区域高度。

在 Opera 浏览器中：document.body.clientWidth 对应可见区域宽度，document.body.clientHeight 对应可见区域高度，document.documentElement.clientWidth 对应页面对象宽度（即 BODY 对象宽度加上 Margin 宽），document.documentElement.clientHeight 对应页面对象高度（即 BODY 对象高度加上 Margin 高）。若未定义 W3C 标准：

IE 浏览器中：document.documentElement.clientWidth 为 0，document.documentElement.clientHeight 为 0。FireFox 浏览器中：document.documentElement.clientWidth 对应页面对象宽度（即 BODY 对象宽度加上 Margin 宽），document.documentElement.clientHeight 对应页面对象高度（即 BODY 对象高度加上 Margin 高）。Opera 浏览器中：document.documentElement.clientWidth 对应页面对象宽度（即 BODY 对象宽度加上 Margin 宽），document.documentElement.clientHeight 对应页面对象高度（即 BODY 对象高度加上 Margin 高）。