javascript中top、clientTop、scrollTop、offsetTop的讲解

摘要:
下面结合各上图介绍一下各个属性的作用:一.offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。二.offsetLeft属性:此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。六.clientHeight属性:此属性可以返回一个元素的高度值,值是:元素的内容+内边距。返回值是一个整数,单位是像素。

javascript中top、clientTop、scrollTop、offsetTop的讲解第1张

下面结合各上图介绍一下各个属性的作用:
一.offsetTop属性:
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
返回值是一个整数,单位是像素。
此属性是只读的。
二.offsetLeft属性:
此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。
三.offsetWidth属性:
此属性可以获取元素的宽度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
四.offsetHeight属性:
此属性可以获取元素的高度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
五.clientWidth属性:
此属性可以返回一个元素的宽度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
六.clientHeight属性:
此属性可以返回一个元素的高度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
七.scrollLeft属性:
此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的。
八.scrollTop属性:
此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的

免责声明:文章转载自《javascript中top、clientTop、scrollTop、offsetTop的讲解》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Linq对DataTable数据的分组统计Tfs 2010使用小技巧下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vueRouter中scrollBehavior实现滚动固定位置

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 history 模式下可用。 当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法: const rout...

RobotFramework 切换窗口控制的用法小结

一:滚动条控制 应用场景:通过滚动条的上下,左右移动,才能让定位的元素可见。 ${value}表示移动的值,如200等。滚动条每次移动,值都会还原,不累加。 例如;同时滚动十次,每次值为100,其结果还是,滚动条只滚动100. 二:切换窗口控制 ${titles}      get window titles ${title2}     get fro...

前端网页的懒加载

作为网页内容的一部分,图像和视频通常要消耗很多资源加载。要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了。但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手。幸运的是,我们有懒加载这个绝招,它可以帮助我们减少加载时间和降低负载,而不在内容上偷工减料。   什么是懒加载? 懒加载是一种在页面加载时延迟加载一些非关键资源的技...

overflow

1. 隐藏x轴滚动条,垂直有滚动条: <body> <div style="100px;height:150px;overflow:scroll;overflow-x:hidden;"> 测试 </div> </body> 2....

移动端解决input被输入法挡住的问题

有过移动端web开发经验的人应该都会遇到这个问题,一个input在页面最底部或者偏下的位置,输入时由于输入法的弹出,在部分浏览器下由于不会自动计算window的高度,导致input被输入法挡住。本文的解决方式是利用scrollTop来解决,在input获取焦点后,动态地设置body的高度并设置scrollTop到指定位置,这样可以保证input会滚动到输入...

VS2019 实用设置

本文记录了 VS2019 预览版使用过程中的一些设置,这些设置也同样适用于 VS2017,我们可以根据个人的实际情况进行修改。 滚动条(Scroll Bar) 将滚动条设置为 map mode 后,则该区域会显示当前整个文件的缩略示图,能够以不同的颜色显示当前文件中的修改状态、错误、警告等信息,便于对当前文件有个全局的认识。在 VS2010 中需要使用...