js 获取各种 宽高

获取屏幕及网页可见区域详细信息
<html>
<script>
function a(){
document.write(
"屏幕分辨率为:"+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽:"+document.body.clientWidth
+"<br />"+
"网页可见区域高:"+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽):"+document.body.offsetWidth
+"<br />"+
"网页可见区域高(包括边线的宽):"+document.body.offsetHeight
+"<br />"+
"网页正文全文宽:"+document.body.scrollWidth
+"<br />"+
"网页正文全文高:"+document.body.scrollHeight
+"<br />"+
"网页被卷去的高:"+document.body.scrollTop
+"<br />"+
"网页被卷去的左:"+document.body.scrollLeft
+"<br />"+
"网页正文部分上:"+window.screenTop
+"<br />"+
"网页正文部分左:"+window.screenLeft
+"<br />"+
"屏幕分辨率的高:"+window.screen.height
+"<br />"+
"屏幕分辨率的宽:"+window.screen.width
+"<br />"+
"屏幕可用工作区高度:"+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度:"+window.screen.availWidth
);
}
</script>
<body onload="a()" >
</body>
</html>

在JavaScript中,有多种方法可以获取屏幕: 1. **使用`window`对象的`innerWidth`和`innerHeight`属性**:可以获取浏览器窗口的内部度和度,包含滚动条,但不包含浏览器的边框、菜单栏等。 ```javascript const width = window.innerWidth; const height = window.innerHeight; console.log(`屏幕度: ${width}, 屏幕度: ${height}`); ``` 2. **使用`document.body`的相关属性**: - `document.body.clientWidth`和`document.body.clientHeight`:获取网页可见区域的,不包含滚动条和边框。 - `document.body.offsetWidth`和`document.body.offsetHeight`:获取网页可见区域的,包含边线的- `document.body.scrollWidth`和`document.body.scrollHeight`:获取网页正文全文的。 ```javascript const clientWidth = document.body.clientWidth; const clientHeight = document.body.clientHeight; const offsetWidth = document.body.offsetWidth; const offsetHeight = document.body.offsetHeight; const scrollWidth = document.body.scrollWidth; const scrollHeight = document.body.scrollHeight; console.log(`网页可见区域(不包含滚动条和边框): ${clientWidth}`); console.log(`网页可见区域(不包含滚动条和边框): ${clientHeight}`); console.log(`网页可见区域(包含边线): ${offsetWidth}`); console.log(`网页可见区域(包含边线): ${offsetHeight}`); console.log(`网页正文全文: ${scrollWidth}`); console.log(`网页正文全文: ${scrollHeight}`); ``` 3. **使用`window.screen`对象的属性**: - `window.screen.height`和`window.screen.width`:获取屏幕分辨率的- `window.screen.availHeight`和`window.screen.availWidth`:获取屏幕可用工作区的度和度,即排除了任务栏等占用的空间。 ```javascript const screenWidth = window.screen.width; const screenHeight = window.screen.height; const availWidth = window.screen.availWidth; const availHeight = window.screen.availHeight; console.log(`屏幕分辨率: ${screenWidth}`); console.log(`屏幕分辨率: ${screenHeight}`); console.log(`屏幕可用工作区度: ${availWidth}`); console.log(`屏幕可用工作区度: ${availHeight}`); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值