clientHeight,offsetHeight,scrollHeight,clientTop,offsetTop,scrollTop

1,224 阅读1分钟

clientHeight和offsetHeight属性和元素的滚动、位置没有关系,它代表元素的高度。
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度(对于inline的元素这个属性一直是0,单位px,只读元素)

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度(对于inline的元素这个属性一直是0,单位px,只读元素)

scrollHeight:包括当前不可见部分的元素的高度,也就是scrollHeight>=clientHeight恒成立。
scrollTop:代表在有滚动条时,元素顶部被遮住部分的高度

offsetTop: 返回当前元素顶部与相对于 HTMLElement.offsetParent 节点的顶部距离的像素值

一个元素的offsetParent可以由以下条件判断得出(满足一条即可):

  1. 具有position属性(除了static值以为)的最近父元素
  2. 最近的table,table cell父元素
  3. 根节点元素
  4. 设置了动画transform的最近父元素
    clientTop:表示上边框border的厚度