JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

最新推荐文章于 2024-09-27 21:51:57 发布

原创

最新推荐文章于 2024-09-27 21:51:57 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了如何使用JavaScript获取浏览器窗口的可见区域大小、全宽全高、滚动位置以及屏幕分辨率等信息。通过document.body和window对象的不同属性，可以精确获取到网页的clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight等数据，适用于不同浏览器环境。示例代码展示了实时更新浏览器窗口尺寸的实现方法。

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.o