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不用加单位)


目录
相关文章
Failed to execute ‘setAttribute‘ on ‘Element‘: ‘;min-height:‘ is not a valid attribute name.添加100vh
Failed to execute ‘setAttribute‘ on ‘Element‘: ‘;min-height:‘ is not a valid attribute name.添加100vh
|
6月前
|
PHP
Trying to access array offset on value of type null
你就可以避免在null值上尝试访问数组偏移量的错误。 总的来说,当你遇到这个错误时,你应该回顾你的代码,确保在尝试访问数组偏移量之前,相关的变量已经被正确地初始化为一个数组,并且不是null。
1711 4
|
6月前
|
安全
qt.qpa.xcb: could not connect to display 问题解决
【5月更文挑战第16天】qt.qpa.xcb: could not connect to display qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "" even though it was found. This application failed to start because no Qt platform plugin could be initialized. Reinstalling the application may fix this problem. 问题解决
3131 0
|
消息中间件 Kafka 测试技术
Apache Kafka-auto.offset.reset参数(earliest、latest、none)含义说明
Apache Kafka-auto.offset.reset参数(earliest、latest、none)含义说明
353 0
|
Java 应用服务中间件 Python
Refused to display 'xxx' in a frame ,because it set 'X-Frame-Options' to 'deny'.
我本是在DJANGO页面的iframe里嵌入springboot的页面。 当报了这个错误之后,我花了时间在nginx和django上, 后来才改变解决思路,从springboot出发,解决问题。
5845 0
|
JavaScript
js中offset、scroll、client三大系列
js中offset、scroll、client三大系列
129 0
js中offset、scroll、client三大系列
|
存储 Web App开发 缓存
Client Side Cache 和 Server Side Cache 的区别
Client Side Cache 和 Server Side Cache 的区别
168 0
Client Side Cache 和 Server Side Cache 的区别