网页、屏幕高度

本文介绍了如何使用JavaScript获取网页的各种尺寸信息,包括可见区域、正文尺寸及屏幕分辨率等,并展示了具体的代码实现。

var s = ""; 
s += "\r\n网页可见区域宽:"+ document.body.clientWidth; 
s += "\r\n网页可见区域高:"+ document.body.clientHeight; 
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)"; 
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; 
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth; 
s += "\r\n网页正文全文高:"+ document.body.scrollHeight; 
s += "\r\n网页被卷去的高:"+ document.body.scrollTop; 
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft; 
s += "\r\n网页正文部分上:"+ window.screenTop; 
s += "\r\n网页正文部分左:"+ window.screenLeft; 
s += "\r\n屏幕分辨率的高:"+ window.screen.height; 
s += "\r\n屏幕分辨率的宽:"+ window.screen.width; 
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight; 
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth; 
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
在JavaScript中,有多种方法可以获取网页屏幕高度: 1. **使用`screen`对象的`height`属性**:此属性可获取用户计算机屏幕高度(单位为像素)。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>JavaScript</title> </head> <body> <button type="button" onclick="getResolution();">获取屏幕高度</button> <script type="text/javascript"> function getResolution() { alert("您计算机屏幕高度为:" + screen.height); } </script> </body> </html> ``` 该方法可以获取整个屏幕高度,适用于需要了解设备屏幕整体尺寸的场景[^1]。 2. **使用`window.screen.availHeight`**:该属性返回屏幕可用工作区的高度,即不包括任务栏等系统占用区域的高度。示例代码如下: ```javascript function getAvailableScreenHeight() { var availableHeight = window.screen.availHeight; console.log("屏幕可用工作区高度:" + availableHeight); } getAvailableScreenHeight(); ``` 这种方式对于根据实际可用空间来布局页面元素非常有用,比如在开发桌面应用程序的网页版时,可避免元素被系统任务栏遮挡[^3]。 3. **使用`window.innerHeight`**:`window.innerHeight`返回浏览器窗口的内部高度,包括滚动条,但不包括浏览器的工具栏和菜单栏等。示例代码如下: ```javascript let innerHeight = window.innerHeight; console.log("浏览器窗口内部高度:" + innerHeight); ``` 此方法适合需要根据浏览器窗口内实际可显示内容的区域来布局页面的场景,例如实现响应式布局时,根据窗口高度动态调整元素的大小和位置[^2]。 4. **使用`document.body.clientHeight`**:`document.body.clientHeight`返回网页可见区域的高度,不包括滚动条和边框。示例代码如下: ```javascript var visibleHeight = document.body.clientHeight; console.log("网页可见区域高度:" + visibleHeight); ``` 该方法适用于需要了解网页实际可见内容区域高度的情况,比如在实现一些自适应高度的容器时使用[^3][^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值