offset、client、scroll三大系列

简介: offset、client、scroll三大系列

offset系列:4ff18c3a5dac483e80a86cdcc9bd9284.png

offsetWidth与style.width的区别:

2179f70e51f449fdab8a70d29a163dff.png

client系列:

ce95683dff954d678a88e63047d9759a.png

scroll系列:

b0c9887a7b2f42e38adebb2ba7aa825c.png

332f157949f64f3eb402e34e102c799e.png

注意:元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYoffset

三大系列总结:

1.offset系列经常用于获取元素位置 offsetLeft offsetTop

2.client系列经常用于获取元素大小 clientWidth clientHeight

3.scroll系列经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXoffset 获得

5.滚动窗口至文档中的特定位置 window.scroll(x,y)(其中x与y不用加单位)


目录
相关文章
|
4月前
|
Java
让星星⭐月亮告诉你,Java NIO之Buffer详解 属性capacity/position/limit/mark 方法put(X)/get()/flip()/compact()/clear()
这段代码演示了Java NIO中`ByteBuffer`的基本操作,包括分配、写入、翻转、读取、压缩和清空缓冲区。通过示例展示了`position`、`limit`和`mark`属性的变化过程,帮助理解缓冲区的工作原理。
56 2
|
5月前
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
1281 0
|
9月前
|
PHP
Trying to access array offset on value of type null
你就可以避免在null值上尝试访问数组偏移量的错误。 总的来说,当你遇到这个错误时,你应该回顾你的代码,确保在尝试访问数组偏移量之前,相关的变量已经被正确地初始化为一个数组,并且不是null。
1970 4
页面中的位置:client、page、screen、offset、以及元素视图位置的区别和方法
页面中的位置:client、page、screen、offset、以及元素视图位置的区别和方法
|
消息中间件 Kafka 测试技术
Apache Kafka-auto.offset.reset参数(earliest、latest、none)含义说明
Apache Kafka-auto.offset.reset参数(earliest、latest、none)含义说明
396 0
|
存储 关系型数据库 MySQL
浅析InnoDB Record Header及page overflow(1)
浅析InnoDB Record Header及page overflow
124 0
浅析InnoDB Record Header及page overflow(1)
|
JavaScript
js中offset、scroll、client三大系列
js中offset、scroll、client三大系列
145 0
js中offset、scroll、client三大系列
|
存储 NoSQL 关系型数据库
浅析InnoDB Record Header及page overflow(2)
浅析InnoDB Record Header及page overflow
149 0