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为元素的实际宽度。
JS中DOM元素获取的宽和高的方法小结_第1张图片
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。
JS中DOM元素获取的宽和高的方法小结_第2张图片

这里自己总结哒、、、

浏览器的宽和高

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 :浏览器可视区域的宽

你可能感兴趣的:(JS)