CSS中的高度
https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight
Element.clientHeight是只读属性,以像素为单位,返回的是元素内部的高度,包括padding但是不包含水平滚动条的高度,元素边框(border),及margin
clientHeight 可以计算为:CSS height+ CSS padding – 水平滚动条的高度(如果存在水平滚动条)
注意:这个属性会四舍五入为整数,如果你需要含有小数的值,使用element.getBoundingClientRect()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
HTMLElement.offsetHeight 只读属性, 以像素为单位,整数, 表示元素的高度包含垂直padding和border。
通常情况下, 一个元素的offsetHeight的计算 包含这个元素的borders,元素垂直方向上的padding,这个元素的水平滚动条(如果有并且显示了)和这个元素的CSS高度。
对于document的body对象,将所有的线性内容的总高度替换掉元素的CSS height来计算。对于floated元素extending below other linear content的会被忽略。
注意:这个属性会四舍五入为整数,如果你需要含有小数的值,使用element.getBoundingClientRect()
上面的图片显示了一个滚动条和offsetHeight。然而,非滚动的元素可能有比可以看到的内容更大的offsetHeight的值。这类的元素一般会包含滚动的元素,因此,非滚动的元素可能是完全或者部分可视,主要依赖于滚动的包含元素的scrollTop的设置。
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight
Element.scrollHeight
是一个只读属性,表示一个元素的高度包含以为溢出
overflow
在屏幕上不可见的内容。
ScrollHeight
的值等于元素显示所有内容不使用垂直滚动条的
clientHeight
。它包含元素的
padding
但是不包含
margin
。
注意:这个属性会四舍五入为整数,如果你需要含有小数的值,使用element.getBoundingClientRect()
应用实例:检测一个元素是否被滚动到底。
element.scrollHeight - element.scrollTop === element.clientHeight
检测元素的尺度
你发现有多个属性可以用来检测元素的宽和高了,但是使用哪一个才是你想要的有点棘手。下面将会帮助你进行选择。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。