搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

document.body.clientHeight:网页可见区域高

document.body.scrollHeight: 网页正文全文高

document.body.offsetHeight:网页可见区域高(包括边线border高)

​ document.body.scrollTop:网页被卷去的高

​ window.screen.height: 屏幕分辨率高

​ 每个HTML元素都具有 clientHeightoffsetHeightscrollHeightoffsetTopscrollTop 这5个和元素

高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结

出规律如下:

1)、clientHeightoffsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:

clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属

性一直是0,单位px,只读元素。

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop_第1张图片

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个

属性一直是0,单位px,只读元素。

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop_第2张图片

接下来讨论出现有滚动条时的情况:

​ 当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时:

2)、scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本

元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是

clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在

没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop_第3张图片

3)、scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条

scrollTop==0恒成立。单位px,可读可设置。

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

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop_第4张图片

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

图片描述

​ 当要做一些与位置相关的插件或效果的时候,像top、clientTop、scrollTop、offsetTop、scrollHeight、

clientHeight、offsetParent。。。看到这么多单词,而且长得那么像,是不是懵X了!

img

第一次看到这图,说实话有点被吓到。。。

===========================================================

**1)offsetParent:**该属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中

最靠近的),已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为

body元素的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性

返回 null。

**2) top:**该属性一般对用过css定位的元素有效(position为“static”时为auto,不产生效果),定义了一个top属

性有效的元素(即定位元素)的上外边距边界与其包含块上边界之间的偏移。

**3)clientTop:**元素上边框的厚度,当没有指定边框厚底时,一般为0。

**4)scrollTop:**位于对象最顶端和窗口中可见内容的最顶端之间的距离,简单地说就是滚动后被隐藏的高度。

**5)offsetTop:**获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

**6)clientHeight:**内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一

个工具条以下到状态栏以上的这个区域,与页面内容无关。

**7)scrollHeight:**IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。FF 认为

scrollHeight 是网页内容高度,不过最小值是 clientHeight。

**8)offsetHeight:**获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。IE、

Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。FF 认为 offsetHeight 是网页内容实际高度,可以小

于 clientHeight。offsetHeight在新版本的FF和IE中是一样的,表示网页的高度,与滚动条无关,chrome中不包

括滚动条。

*诸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等,和top、height类似,不再赘述。

============================================================

**9)clientX、clientY:**相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。

IE事件和标准事件都定义了这2个属性。

**10)pageX、pageY:**类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性

不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

**11)offsetX、offsetY:**相对于事件源元素(target或srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事

件没有对应的属性。

**12)screenX、screenY:**相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

你可能感兴趣的:(搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop)