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

末蓝、 2022-11-03 00:53 238阅读 0赞

加给元素：

*  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,

他们的区别如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaXNpeHVlMTk4NzAyMjE_size_16_color_FFFFFF_t_70][]

可以看出，

event.screenX和event.screenY是相对于显示屏的位置。

event.clientX和event.clientY是相对于浏览器的位置。

event.offsetX和event.offsetY是相对于元素的位置。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaXNpeHVlMTk4NzAyMjE_size_16_color_FFFFFF_t_70]: /images/20221024/77f5ab18a80d4f5abfec6c593ac7f9b9.png