目录

1.dom元素的宽高

2.鼠标事件中的常用高度宽度：

3. 总结：

4.参考博客：

---

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

2.鼠标事件中的常用高度宽度：

1、pageX和pageY：
    相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置，
    并且如果在页面中嵌入了嵌入的可滚动页面并且用户移动滚动条，则实际上可以改变位置。

2、screenX和screenY：
    相对于物理屏幕/监视器的左上角，只有增加或减少监视器数量或监视器分辨率时，此参考点才会移动。

3、clientX和clientY：
     相对于浏览器窗口的内容区域（视口）的左上边缘。即使用户从浏览器中移动滚动条，此点也不会移动。

详细位置说明请看图：

 还可以参考下图。

3. 总结：

关于浏览器高度获取的内容每次总是忘记，干脆一次性把常用的罗列一下，方便下次查找。欢迎大佬们补充指正！

4.参考博客：

https://www.cnblogs.com/smile6542/p/11895646.html

https://blog.csdn.net/qq_40990854/article/details/88925460?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control

https://www.cnblogs.com/lingdublog/p/6438055.html