搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop1.clientHeight2.offsetHeight3.scrollHeight4.scrollTop5.offsetTop

1.clientHeight

它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

对于没有定义CSS或者内联布局盒子的元素为0，

语法

var h = element.clientHeight;

返回整数 h，表示 element 的 clientHeight（单位像素）。

2.offsetHeight

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包括外边距。

offsetHeight = clientHeight + 滚动条 + 边框。

语法

var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

intElemOffsetHeight是一个变量存储对应元素的offsetHeight像素的整数值。offsetHeight属性是只读的。

3.scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素

语法

var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;

intElemScrollHeight 存储着与元素scrollHeight像素值对应的一个整数。scrollHeight是一个只读属性。

4.scrollTop

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

语法

// 获得滚动的像素数
var  intElemScrollTop = someElement.scrollTop;

运行此代码后， intElemScrollTop 是一个整数，即element的内容向上滚动的像素数。

// 设置滚动的距离
element.scrollTop = intValue;

scrollTop 可以被设置为任何整数值

5.offsetTop

当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。 

6.判定元素是否滚动到底

如果元素滚动到底，下面等式返回true，没有则返回false.

element.scrollHeight - element.scrollTop === element.clientHeight

最后

以上就是爱听歌枫叶为你收集整理的搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop1.clientHeight2.offsetHeight3.scrollHeight4.scrollTop5.offsetTop的全部内容，希望文章能够帮你解决搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop1.clientHeight2.offsetHeight3.scrollHeight4.scrollTop5.offsetTop所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。