当前位置 : 主页 > 网页制作 > html >

clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop、Height

来源:互联网 收集:自由互联 发布时间:2021-06-12
Height 返回当前文档中的body元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距

Height 

返回当前文档中的<body>元素的高度

clientHeight

对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

clientHeight 包含 padding

scrollHeight 

scrollHeight的值在有滚动条的情况下包括滚动条滚动出去的内容,没有滚动条时是和clientHeight相同。包括元素的padding,但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

有滚动条 scrollHeight  包含 溢出的内容+padding

没有滚动条 scrollHeight  = clientHeight  

offsetHeight 

包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。

offsetHeight 包含 border+padding+元素的水平滚动条

scrollTop

一个元素的 scrollTop 值是这个元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。

offsetTop

当前元素相对于其 offsetParent 元素的顶部内边距的距离。就是当前元素顶部距离最近父元素顶部的距离

clientTop

一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距


参考资料:搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网友评论