详解 clientWidth / scrollWidth / offsetWidth / getBoundingClientRect

无

clientWidth / scrollWidth / offsetWidth

  • clientWidth 是DOM元素节点的属性，它反映的是该元素可见区域的宽度，不包括滚动条宽度、边线宽度，单位是像素。
  • scrollWidth 是DOM元素节点的属性，它反映的是该元素内容区域的宽度，不包括滚动条宽度、边线宽度，单位是像素。
  • offsetWidth 是DOM元素节点的属性，它反映的是该元素可见区域的宽度，包括滚动条宽度、边线宽度，单位是像素。

下边这个 div 的宽度为 300px，里面包含一个div，其宽度为 330px;
我们在这里要放很多的文字；width 330px;
Ruler

getBoundingClientRect

getBoundingClientRect 是元素节点的方法，它返回的是元素的宽高和相对视窗的位置;
返回的结构为 DOMRect: { x, y, top, left, bottom, right, width, height }
具体可见下面这个图：
Rect

offsetLeft / offsetTop / scrollLeft / scrollTop / clientLeft / clientTop