网页可见区域宽: 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
下面内容转自他的博客:
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 :浏览器可视区域的宽