JS获取浏览器中的各种宽高值

本文详细介绍了网页中常用的尺寸与位置属性,包括width、height等基本尺寸属性,clientWidth、clientHeight等可视区域属性,offsetWidth、offsetHeight等包含边界的尺寸属性,scrollWidth、scrollHeight等可滚动范围属性,以及screenTop、screenLeft等屏幕位置属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

width:

clientWidth:对象实际内容的宽度,不包含边线,最大不超过视口宽度 
offsetWidth:对象实际宽度,包含边线,最大不超过视口宽度 
scrollWidth:对象实际宽度,不包含边线,可超过视口宽度

height:(都可超过视口高度)

clientHeight:对象实际内容的高度,不包含边线 
offsetHeight:对象实际高度,包含边线 
scrollHeight:对象实际高度,不包含边线。如果对象为body,大于视口时为实际高度,小于视口时为视口高度

分辨率宽高:

window.screen.width:屏幕分辨率宽度 
window.screen.height:屏幕分辨率高度 
window.screen.availWidth:屏幕工作区宽度 
window.screen.availHeight:屏幕工作区高度(不包含windows底边栏)

滚动距离:

scrollTop:对象被卷去的高度 
scrollLeft:对象被卷去的宽度

偏移值:

event.clientX:相对文档的横向偏移值 
event.clientY:相对文档的纵向偏移值 
event.offsetX:相对当前对象的横向偏移值 
event.offsetY:相对当前对象的纵向偏移值 
offsetLeft:相对父元素的横向偏移值 
offsetTop:相对父元素的纵向偏移值 
window.screenTop:浏览器相对于屏幕左上角的横向偏移值 
window.screenLeft:浏览器相对于屏幕左上角的纵向偏移值

转载于:https://www.cnblogs.com/liyuspace/p/7768040.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值