位置: IT常识 - 正文
原生js获取元素的各种位置(大全）(原生js获取元素高度)
发布时间：2024-01-16推荐整理分享原生js获取元素的各种位置(大全）(原生js获取元素高度)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:原生js如何获取dom,原生js获取元素高度,原生js获取元素宽度,原生js获取元素类名设置高度,原生js获取元素祖先元素的方法parentNodes,原生js获取元素祖先元素的方法parentNodes,原生js获取元素高度,原生js获取元素祖先元素的方法parentNodes,内容如对您有帮助，希望把文章链接给更多的朋友！
加给元素：
offsetLeft （距离定位父级的距离）
offsetTop （距离定位父级的距离）
offsetWidth （可视宽度）
offsetHeight （可视高度）
clientLeft （左边框宽度）
clientTop （上边框宽度）
clientWidth（width + padding）
clientHeight（height + padding）
scrollTop（纵向滚动距离）
scrollLeft（横向滚动距离）
scrollWidth（内容宽度）
scrollHeight（内容高度）
getBoundingClientRect ( ) 返回值：对象 有6个属性
left（元素左侧相对于可视区左上角的距离）
right（元素右侧相对于可视区左上角的距离）
top（元素上边相对于可视区左上角的距离）
bottom（元素下边相对于可视区左上角的距离）
width（可视宽度）
height（可视高度）
获取可视区宽高：
window.innerWidth
window.innerHeight
document.documentElement.clientWidth
document.documentElement.clientHeight
屏幕宽高：
window.screen.width
window.screen,height
获取文档宽高：
document.body.clientWidth
document.body.clientHeight
document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth（如果内容宽度超过一屏，得到文档宽度；如果内容小于一屏，得到一屏的宽度）
document.body.scrollHeight （如果内容高度超过一屏，得到文档高度；如果内容小于一屏，得到一屏的高度）
获取滚动条距离：
document.body.scrollTop
document.body.scrollLeft
window.scrollY
window.scrollX
document.documentElement.scrollTop
document.documentElement.scrollLeft
window.pageYOffset
window.pageXOffset
js中获取当前位置有如下几种方法：
event.offsetX, （IE属性，测试都可以使用）
event.offsetY, （IE属性，测试都可以使用）
event.clientX,
event.clienY,
event.scrennX,
event.screenY,
他们的区别如下：
可以看出，
event.screenX和event.screenY是相对于显示屏的位置。
event.clientX和event.clientY是相对于浏览器的位置。
event.offsetX和event.offsetY是相对于元素的位置。
上一篇：Spring Boot 中如何使用 Spring Cloud Alibaba 实现微服务治理(spring bootcsdn)
下一篇：【Pytorch基础知识】数据的归一化和反归一化(pytorch基本操作)
