一、元素
image.png

二、带几何属性
image.png

几何属性

一、几何属性中，除了scrollLeft / scrollTop是可修改的，其他属性都是只读的。

offsetParent, offsetLeft/Top

一、offsetParent是最接近的祖先（ancestor），在浏览器渲染期间，它被用于计算坐标。
二、最近的祖先为下列之一
1、css定位的（position为absolute， relative或fixed）
2、或


3、或
三、属性offsetLeft/offsetTop提供相对于offsetParent左上角的x/y坐标。
【示例1】内部的
有
作为offsetParent，并且offsetLeft/offsetTop让它从左上角位移（180）

  1. <main style="position: relative" id="main">
  2.   <article>
  3.     <div id="example" style="position:absolute; left: 180px; top: 180px">...</div>
  4.   </article>
  5. </main>
  6. <script>
  7.   alert(example.offsetParent.id); // main
  8.   alert(example.offsetLeft); // 180（注意：这是1个数字，不是字符串"180px"）
  9.   alert(example.offsetTop); // 180
  10. </script>

四、有以下几种情况，offsetParent的值为null
1、对于未显示的元素（display: none或者不在文档中）
2、对于与
3、对于带有position: fixed的元素

offsetWidth/ height

一、这两个属性是最简单的。它们提供了元素的“外部”width / height。或者，换句话说，它的完整大小（包括边框）。
值：border + padding + content + scrollbar
二、对于未显示的元素，几何属性为0/null
1、如果一个元素（或其任何祖先）具有display: none或不在文档中，则所有几何属性均为零（或offsetParent为null）
【示例1】当我们创建了一个元素，但尚未将其插入文档中，或者它（或它的祖先）具有display:none时，offsetParent为null，并且offsetWidth和offsetHeight 为0
【示例2】我们可以用它来检查一个元素是否被隐藏

function isHidden(elem) {
    return !elem.offsetWidth && !elem.offsetHeight; // 对于屏幕上显示，但大小为零的元素（例如空的<div>，它们的isHidden返回true）
}

clientTop/ Left

一、在元素内部，我们有边框（border）。
二、clientTop、clientLeft属性不是边框的width/ height，而是内侧与外侧的相对坐标。
【示例1】文档从左从到右显示，clientTop、clientLeft属性是边框的width/height
image.png
【示例2】文档从右到左显示（操作系统为阿拉伯语或希伯来语）时，影响就显现出来了。此时滚动条不在右边，而是在左边，此时clientLeft则包含了滚动条的宽度。
这种情况下，clientLeft的值将不是25，而是加上滚动条的宽度25 + 16 = 41
image.png

clientWidth / Height

一、这些属性提供了元素边框内区域的大小。
二、clientWidth包括了“content width”和“padding”，但不包括滚动条宽度（scrollbar）
值：padding + content

scrollLeft / scrollTop

一、属性scrollLeft / scrollTop是元素的隐藏、滚动部分的width / height
image.png
二、scrollTop是“已经滚动了多少”。
三、scrollLeft / scrollTop是可修改的，并且浏览器会滚动该元素。

【示例】将scrollTop设置为0或1个大的值，如1e9，将会使元素滚动到顶部/底部

scrollWidth / height

一、这些属性就像clientWidth /clientHeight，但它们还包括滚动出（隐藏）的部分。
【示例1】可以使用这些属性将元素展开（expand）到整个width / height

// 将元素展开（expand） 到完整的内容高度
element.style.height = `${element.scrollHeight}px`;

不要从CSS中获取width / height

一、使用几何属性的原因
1、width / height取决于另一个属性：box-sizing，它定义了“什么是”CSS宽度和高度。处于CSS的目的而对box-sizing进行的更改可能会破坏此类JavaScript操作。
2、width/ height可能是auto，例如内联（inline）元素

<span id="elem">Hello!</span>

<script>
  alert(getComputedStyle(elem).width); // auto
</script>

3、滚动条。有时，在没有滚动条的情况下代码工作正常，当出现滚动条时，代码就出现了bug，因为在某些浏览器中，滚动条会占用内容的空间。因此，可用于内容的实际宽度小于CSS宽度。而clientWidth / clientHeight则会考虑到这一点。
（1）使用getComputedStyle(elem).width时，情况有所不同。有些浏览器（如chrome）返回的是实际内部宽度减去滚动条宽度，而某些浏览器（如firefox）返回的是CSS宽度（忽略了滚动条）。这种跨浏览器的差异是不使用getComputedStyle而依靠几何属性的原因。