原生JavaScript获取浏览器窗口与元素尺寸及位置的方法汇总

作者:白露

时间:2026-10-21

浏览:465

本文汇总了原生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中获取窗口及元素尺寸与位置的核心方法集合,旨在辅助开发者进行页面布局与交互开发。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章