JS中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.cnblogs.com/kongxianghai/p/4192032.html

scrollWidth、clientWidth、offsetWidth的区别

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变

情况1：
元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：
元素的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

这里自己总结哒、、、

浏览器的宽和高

window.screen.availHeight：声明了显示浏览器的屏幕的可用高度， 固定值，不包含任务栏

window.screen.availWidth): 浏览器的屏幕的宽度=width 1280 固定值

window.screen.height: 浏览器屏幕实际高

window.screen.width: 浏览器屏幕实际宽

window.pageYOffset : 浏览器滚动条的上偏移

window.pageXOffset) :浏览器滚动条的左偏移
说明：
（1）pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
（2） pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。
（3）这些属性是只读的。

window.innerWidth：浏览器可视区域的高
window.innerHeight ：浏览器可视区域的宽