位置:- 正文
原生js获取元素的各种位置(大全）(原生js获取元素高度)
编辑：rootadmin推荐整理分享原生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是相对于元素的位置。