弄清楚烦人的clientHeight与clientTop、scrollHeight与scrollTop、offsetHeight与offsetTop与JQuery中的innerHeight()与...

clientHeight与clientTop

• clientHeight

包括 padding 但不包括 border、水平滚动条、margin的元素的高度。对于行内元素这个属性一直是0。单位为px，只读元素。

client-MDN

• clientTop

元素顶部边框的宽度单位为px，可以理解为border-top。如没有设置 border-top的值，则 element.clientTop 的值为 0

client-MDN

注意如下情况：

  
  
  


 

   
Helo World!

clientHeight

clientHeight 字面意思即为自身的高度, 在上例 容器内部的子元素的高度 高于父容器，因为 overflow: scroll;所以出现滚动条。但元素本身的clientHeight 是不受这些因素影响的(这一点容易点混淆)。所以 div#ct.cilentHeight 与 div#item.clientHeight还是开始设置样式是的值。

Element.getBoundingClientRect()

返回元素的大小及其『相对于视口左上角(其中width height不是相对于左上角)』的位置(且结果会保留小数比clientHeight精确)。

Element.getBoundingClientRect()

element.getBoundingClientRect()包括 top right bottom left height width

• top right bottom left: 相对于视口左上角的原点位置，不包括 margin 的值，但是会包括滚动条

• height width: height 矩形盒子的高度。 width矩形盒子的宽度， 且存在width = right - left height = bottom - top

---

scrolltHeight与scrollTop

• scrollHeight

等于在没有垂直滚动条 的情况下，为所需要填充内容视图的最小值，包括padding(无论可见还是不可见)。 其元素的本身(而不是它的父容器)的 clientHeight 等于 scrollHeight

scrollHeight

• scrollTop

元素的顶部到视口可见内容的顶部 的距离的度量，前提是这个元素的本身有垂直滚动条，否则 scrollTop的值为 0

scrollTop

注： 如果垂直方向的scrolllBar存在，且当前元素滚动到底:

element.scrollHeight - element.scrollTop === element.clientHeight
// true

---

offsetHeight与offsetTop

• offsetHeight(高度偏移)

元素CSS高度的衡量标准，包括 border padding 还包括 水平方向上的 scrollBar。不包括伪元素的高度

offsetHeight = content + padding + border + 水平方向的scrollBar

offsetHeight

• offsetTop(顶部偏移)

当前元素相对于其 当前最接近的父辈元素的顶部内边距的距离。

也就是当前元素的 border-top(不包括border的值) 到 最接近的 父元素的margin-top边缘的距离

offsetTop

---

JQuery中的 innerHeight与outerHeight

详情如图所示

JQuery中的 innerHeight与outerHeight

---

参考：

MDN

nsIDOMClientRect-MDN

stack overflow-What is offsetHeight, clientHeight, scrollHeight?

medium-Difference between offsetHeight, clientHeight and scrollHeight

stack overflow- What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery - Stack Overflow

---

版权声明：本文为博主原创文章，未经博主许可不得转载