js中scrollTop、clientTop、offsetHeight和offsetTop等属性用法详解

文章2019-06-28769 人已阅来源：网络

crollTop、offsetHeight和offsetTop等属性用法详解

标题中的几个相关相关属性在网页中有这大量的应用，尤其是在运动框架中，但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题，导致掌握起来比较有难度，下面就介绍一下相关属性的用法。

javascript中的常用相关属性：

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

再来看一张比较经典的示意图：

js中scrollTop、clientTop、offsetHeight和offsetTop等属性用法详解

下面结合各上图介绍一下各个属性的作用

一、offsetTop属性

此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。

返回值是一个整数，单位是像素。

此属性是只读的。

二、offsetLeft属性

此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。

三、offsetWidth属性

此属性可以获取元素的宽度，宽度值包括元素内容+内边距+边框。不包括外边距和滚动条部分。

返回值是一个整数，单位是像素。

此属性是只读的。

四、offsetHeight属性

此属性可以获取元素的高度，宽度值包括元素内容+内边距+边框。不包括外边距和滚动条部分。

返回值是一个整数，单位是像素。

此属性是只读的。

五、clientWidth属性

此属性可以返回一个元素的宽度值，值是元素的内容+内边距。不包括边框、外边距和滚动条部分。

返回值是一个整数，单位是像素。

此属性是只读的。

六、clientHeight属性

此属性可以返回一个元素的高度值，值是元素的内容+内边距。不包括边框、外边距和滚动条部分。

返回值是一个整数，单位是像素。

此属性是只读的。

七、scrollLeft属性

此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。

返回值是一个整数，单位是像素。

此属性是可读写的。

八、scrollTop属性

此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。

返回值是一个整数，单位是像素。

此属性是可读写的。

九、scrollHeight属性

此属性获取对象的实际尺寸。

AIHX

js中scrollTop、clientTop、offsetHeight和offsetTop等属性用法详解

crollTop、offsetHeight和offsetTop等属性用法详解

javascript中的常用相关属性：

再来看一张比较经典的示意图：

下面结合各上图介绍一下各个属性的作用

一、offsetTop属性

二、offsetLeft属性

三、offsetWidth属性

四、offsetHeight属性

五、clientWidth属性

六、clientHeight属性

七、scrollLeft属性

八、scrollTop属性

九、scrollHeight属性

相关内容