当前位置:网站首页>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
边栏推荐
- The difference between VaR, let and Const
- .Net Core 下使用 Quartz —— 【7】作业和触发器之简单触发器
- .Net Core 下使用 Quartz —— 【6】作业和触发器之触发器的日历
- FOC single resistance sampling position loop control servo motor
- .Net Core 下使用 Quartz —— 【1】快速开始
- 千呼万唤始出来
- 1-5 NodeJS CommonJs规范
- el-date-picker限制选择范围,从当前时间到两个月前
- sqlserver性能优化建议
- Devexpress Gridview 添加全选列
猜你喜欢
随机推荐
js中entries(),keys(),values() , some(), Object.assign()遍历数组用法
Set与Map
ECMAScript历史
v-for下定时给图片添加动画
Devexpress Gridview 添加全选列
C language code specification
The use of volatile in C language
.Net Core 下使用 Quartz —— 【6】作业和触发器之触发器的日历
JS的解析与执行过程
查漏补缺(三)
颜色字符串转换
useCenterHook
Special register C51 / C52
千呼万唤始出来
导入文件时候 new FormData()
数据可视化进一步学习
Wildcards and special symbols for shell scripts
1-4 NodeJS的安装之配置可执行脚本
百度地图3D旋转和倾斜角度的调整
input文件上传