元素的客户端尺寸(client dimensions)包含元素内容及其内边距所占用的空间。客户端尺寸只有两 个相关属性:clientWidth 和 clientHeight。其中，clientWidth 是内容区宽度加左、右内边距宽 度，clientHeight 是内容区高度加上、下内边距高度。图 16-2 形象地展示了这两个属性。
客户端尺寸实际上就是元素内部的空间，因此不包含滚动条占用的空间。这两个属性最常用于确定 浏览器视口尺寸，即检测document.documentElement的clientWidth和clientHeight。这两个 属性表示视口(或元素)的尺寸。 注意 所有这些偏移尺寸属性都是只读的，每次访问都会重新计算。因此，应该尽量减少 查询它们的次数。比如把查询的值保存在局量中，就可以避免影响性能。
注意 与偏移尺寸一样，客户端尺寸也是只读的，而且每次访问都会重新计算。
滚动尺寸
最后一组尺寸是滚动尺寸(scroll dimensions)，提供了元素内容滚动距离的信息。有些元素，比如 无须任何代码就可以自动滚动，而其他元素则需要使用 CSS 的 overflow 属性令其滚动。滚动 尺寸相关的属性有如下 4 个。 scrollHeight，没有滚动条出现时，元素内容的总高度。 scrollLeft，内容区左侧隐藏的像素数，设置这个属性可以改变元素的滚动位置。 scrollTop，内容区顶部隐藏的像素数，设置这个属性可以改变元素的滚动位置。 scrollWidth，没有滚动条出现时，元素内容的总宽度。
scrollWidth和scrollHeight可以用来确定给定元素内容的实际尺寸。例如，元素是浏 览器中滚动视口的元素。因此，document.documentElement.scrollHeight 就是整个页面垂直方 向的总高度。 scrollWidth 和 scrollHeight 与 clientWidth 和 clientHeight 之间的关系在不需要滚动的 文档上是分不清的。如果文档尺寸超过视口尺寸，则在所有主流浏览器中这两对属性都不相等， scrollWidth 和 scollHeight 等于文档内容的宽度，而 clientWidth 和 clientHeight 等于视口 的大小。 scrollLeft 和 scrollTop 属性可以用于确定当前元素滚动的位置，或者用于设置它们的滚动位 置。元素在未滚动时，这两个属性都等于 0。如果元素在垂直方向上滚动，则 scrollTop 会大于 0， 表示元素顶部不可见区域的高度。如果元素在水平方向上滚动，则 scrollLeft 会大于 0，表示元素左 侧不可见区域的宽度。因为这两个属性也是可写的，所以把它们都设置为 0 就可以重置元素的滚动位置。 28
DOM2和 DOM3 下面这个函数检测元素是不是位于顶部，如果不是则把它滚动回顶部:
function scrollToTop(element) {
if (element.scrollTop != 0) {
element.scrollTop = 0;
}
}这个函数使用 scrollTop 获取并设置值。
4. 确定元素尺寸
浏览器在每个元素上都暴露了 getBoundingClientRect()方法，返回一个 DOMRect 对象，包含 6 个属性:left、top、right、bottom、height 和 width。这些属性给出了元素在页面中相对于视 口的位置。图 16-41展示了这些属性的含义。
