当前位置:网站首页>offset和client获取dom元素位置信息
offset和client获取dom元素位置信息
2022-04-23 05:57:00 【zjLOVEcyj】
offset获取元素宽高和偏移量
- offsetTop获取元素上部相对于带定位的父元素偏移的距离,若父元素均不带定位则返回相对于body的距离
- offsetLeft作用同offsetTop
- offsetParent返回元素带有定位的父元素,父元素均不带定位则返回body
- offsetWidth返回元素元素宽度,包括padding,边框,内容区域的宽度
- offsetHeight作用同offsetWidth
offset与style的区别
最明显的区别在于offset获取到的属性值是只读属性,不能用于修改元素本身的大小和偏移量,是不带单位的数值
而style获取的属性值是读写属性,可以用于修改元素本身的大小和偏移等
此外,style只能获取到元素在行内样式中指定的样式属性,而offset可以获取元素在任意方式下指定的属性
点击事件获取鼠标坐标
- e.pageX可以获取点击事件的鼠标距离页面左侧距离
- e.pageY可以获取点击事件的鼠标距离页面上侧距离
client获取元素边框和宽高
- clientTop获取上边框大小
- clientLeft获取左边框大小
- clientWidth获取元素宽度,不包含边框
- clientHeight获取元素高度,不包含边框
scroll获取滚动信息
- scrollTop获取元素被卷去的上侧距离
- scrollLeft返回元素被卷去的左侧距离
- scrollWidth获取元素自身宽度 不含边框
- scrollHeight获取元素自身高度 不含边框 与clientHeight的区别在于,当元素内容溢出时,scrollHeight或返回包含溢出内容的高度,而clientHeight则不会
获取页面的滚动距离
- window.pageXOffset获取整个页面上滚的距离
- window.pageYOffset获取整个页面右滚的距离
版权声明
本文为[zjLOVEcyj]所创,转载请带上原文链接,感谢
https://blog.csdn.net/cyj5201314/article/details/124245225
边栏推荐
猜你喜欢
随机推荐
浏览器中堆栈内存的底层处理
导入文件时候 new FormData()
The use of volatile in C language
js查找字符串中出现了三次的字符
自用学习笔记-connectingString配置
查漏补缺(四)
JS实现私有属性
深入理解控制反转和依赖注入
js中entries(),keys(),values() , some(), Object.assign()遍历数组用法
Joseph sequence segment tree o (nlogn)
.NET Standard详解
oninput 一个函数达到控制多个oninput的效果(将本输入框的内容作为参数)【很实用,很实用】
初步认识Promse
Aperçu de Redux
JS的解析与执行过程
Special register C51 / C52
freeCodeCamp----time_calculator练习
元编程,代理Proxy与反射Reflect
查漏补缺(五)
出入库与库存系统的模型问题