本文汇总了原生JavaScript中获取浏览器可视区域宽高、页面滚动距离以及DOM元素尺寸和相对位置的核心属性。涵盖clientWidth、scrollWidth、offsetWidth及scrollTop等关键属性,适用于需要精确控制页面布局与交互的开发场景。
浏览器窗口尺寸与滚动状态获取
获取浏览器可视区域的宽度,可使用 document.documentElement.clientWidth 或 document.body.clientWidth。
获取浏览器可视区域的高度,可使用 document.documentElement.clientHeight 或 document.body.clientHeight。
获取包含边线和滚动条在内的窗口可视区域宽度,使用 document.body.offsetWidth。
获取包含边线和滚动条在内的窗口可视区域高度,使用 document.body.offsetHeight。
获取页面实际内容的宽度,使用 document.body.scrollWidth。
获取页面实际内容的高度,使用 document.body.scrollHeight。
获取垂直滚动条下拉卷起的距离,使用 document.documentElement.scrollTop 或 window.pageYOffset 或 document.body.scrollTop。
获取水平滚动条侧拉卷起的距离,使用 document.body.scrollLeft 或 document.documentElement.scrollLeft。
获取网页正文部分相对于视口顶部的上边距,使用 window.screenTop。
获取网页正文部分相对于视口左侧的左边距,使用 window.screenLeft。
DOM元素尺寸与相对位置获取
获取指定元素的宽度,使用 obj.offsetWidth。
获取指定元素的高度,使用 obj.offsetHeight。
获取元素相对于父元素的上位移,使用 obj.offsetTop。注意:此属性仅在元素的包含元素不含滚动条时准确反映位置。
获取元素相对于父元素的左位移,使用 obj.offsetLeft。注意:此属性仅在元素的包含元素不含滚动条时准确反映位置。
以上内容为原生JavaScript中获取窗口及元素尺寸与位置的核心方法集合,旨在辅助开发者进行页面布局与交互开发。