DOM元素大小

一、偏移量

  偏移量包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。通过下列4个属性可以取得元素的偏移量。

  offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

  offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）水平滚动条的宽度、上边框宽度和下边框宽度。

  offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

  offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

  其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。

  ⚠️注意：

  1、所有偏移量属性都是只读的，而且每次访问他们都需要重新计算。

  2、包含元素指带有定位元素（相对定位，绝对定位，固定定位）的父元素，如果父元素不是定位元素，则继续上溯所有祖先元素直到body。

二、客户区大小

  客户区大小指的是元素内容及其内边距所占据的空间大小。

  clientWidth：元素内容区宽度加上左右内边距宽度。

  clientHeight：元素内容区高度加上上下内边距高度。

  ⚠️注意：

  1、滚动条占用的空间不计算在内。

  2、客户区大小是只读的。

三、滚动大小

  滚动大小指的是包含滚动内容的元素的大小。

  scrollHeight：在没有滚动条的情况下，元素内容的总高度。

  scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

  scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

  scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

四、确定元素大小

  getBoundingClientRect()方法返回一个矩形对象，包含4个属性：left、top、right和bottom。