1、dom元素获取宽高的一些属性
javascript中获取dom元素高度和宽度的属性如下：
网页可视区域宽： document.body.clientWidth
网页可视区域高： document.body.clientHeight
网页可视区域宽： document.body.offsetWidth (包括边距的宽)
网页可视区域高： document.body.offsetHeight (包括边距的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
对应的dom元素的宽高常用的属性：
元素的实际高度：document.getElementById(“div”).offsetHeight
元素的实际宽度：document.getElementById(“div”).offsetWidth
元素的实际距离左边界的距离：document.getElementById(“div”).offsetLeft
元素的实际距离上边界的距离：document.getElementById(“div”).offsetTop文章来源：https://www.toymoban.com/news/detail-734305.html
2、鼠标事件中常用高度宽度
| 属性 | 说明 |
|---|---|
| clientX | 以浏览器左上角为原点，定位x轴坐标 |
| clientY | 以浏览器左上角为原点，定位y轴坐标 |
| offsetX | 以当前事件的目标对象左上角为原点，定位x轴坐标 |
| offsetY | 以当前事件的目标对象左上角为原点，定位y轴坐标 |
| pageX | 以Document对象(即文本窗口)左上角为原点，定位x轴坐标 |
| pageY | 以Document对象(即文本窗口)左上角为原点，定位y轴坐标 |
| screenX | 电脑屏幕左上角为原点，定位x轴坐标 |
| screenY | 电脑屏幕左上角为原点，定位y轴坐标 |
| layerX | 最近的绝对定位的父元素(没有的话就位Document对象)左上角为原点，定位x轴坐标 |
| layerY | 最近的绝对定位的父元素(没有的话就位Document对象)左上角为原点，定位y轴坐标 |
各属性对整个屏幕以及整个网页的关系
文章来源地址https://www.toymoban.com/news/detail-734305.html
- clientX 和 clientY 是点击位置与可视区距离的宽高
- pageX 和 pageY 是点击位置与整个页面距离的宽高
- scrollLeft 和scrollTop 是当前可视区的左边框和顶部边框距离页面左侧和顶部的距离（可理解为滚动距离）
- offsetX 和offsetY 是你所点击的位置距离点击元素的左侧和顶部的距离
到了这里，关于JS中获取dom元素高度相关方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
