js 元素尺寸

属性和方法并不是 DOM2 Style 规范中定义的，但与 HTML 元素的样式有关。DOM 一 直缺乏页面中元素实际尺寸的规定。IE 率先增加了一些属性，向开发者暴露元素的尺寸信息。这些属性 现在已经得到所有主流浏览器支持。

1. 偏移尺寸

第一组属性涉及偏移尺寸(offset dimensions)，包含元素在屏幕上占用的所有视觉空间。元素在页 面上的视觉空间由其高度和宽度决定，包括所有内边距、滚动条和边框(但不包含外边距)。以下 4 个 属性用于取得元素的偏移尺寸。  offsetHeight，元素在垂直方向上占用的像素尺寸，包括它的高度、水平滚动条高度(如果可 见)和上、下边框的高度。 17  offsetLeft，元素左边框外侧距离包含元素左边框内侧的像素数。  offsetTop，元素上边框外侧距离包含元素上边框内侧的像素数。  offsetWidth，元素在水平方向上占用的像素尺寸，包括它的宽度、垂直滚动条宽度(如果可 见)和左、右边框的宽度。 其中，offsetLeft和offsetTop是相对于包含元素的，包含元素保存在offsetParent属性中。 19 offsetParent 不一定是 parentNode。比如，元素的 offsetParent 是作为其祖先的 元素，因为

是节点层级中第一个提供尺寸的元素。图 16-1 展示了这些属性代表的不同尺寸。

要确定一个元素在页面中的偏移量，可以把它的 offsetLeft 和 offsetTop 属性分别与 offsetParent 的相同属性相加，一直加到根元素。下面是一个例子:

function getElementLeft(element) {
      let actualLeft = element.offsetLeft;
      let current = element.offsetParent;
  while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent; 27
 }
  return actualLeft;
}     function getElementTop(element) {
      let actualTop = element.offsetTop;
      let current = element.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
}
      return actualTop;
    }

这两个函数使用 offsetParent 在 DOM 树中逐级上溯，将每一级的偏移属性相加，最终得到元 素的实际偏移量。对于使用 CSS 布局的简单页面，这两个函数是很精确的。而对于使用表格和内嵌窗 格的页面布局，它们返回的值会因浏览器不同而有所差异，因为浏览器实现这些元素的方式不同。一 般来说，包含在

元素中所有元素都以为其 offsetParent，因此 getElementleft() 和 getElementTop()返回的值与 offsetLeft 和 offsetTop 返回的值相同。