原生js获取元素的各种位置(大全）

加给元素：

• 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是相对于元素的位置。