dom块级元素的各种宽高

Posted 2021-01-17 zxscn2013

clientHeight,clientWidth: 元素宽高和padding, 不包括边框和margin, 如果有滚动条，还要减去滚动条的宽高。注意，这个值始终是整数，如果是小数会被四舍五入。

clientLeft属性等于元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。该属性总是返回整数值，如果是小数，会四舍五入。

clientTop属性等于网页元素顶部边框的宽度（单位像素），其他特点都与clientLeft相同。

scrollHeight属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。只读。

offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。

offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。

offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。