获得宽高的各种方式

本文介绍了六种获取网页元素宽高的方法,包括通过内联样式、CSS样式、屏幕尺寸、网页全文尺寸、可见区域尺寸等,并解释了各自的适用场景及特点。

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

获得宽高的各种方式

1、dom.style.width/height

<div class = "child1" id="child1" style="width: 100px;">  

获取宽度:

var ele = document.getElementById('child1');
console.log(ele.style.width);  //100px

这种方法只适用于内联样式,如果在 css 中设置 width 是获取不到的

2、window.getComputedStyle(dom).width/height

<div class = "child1" id="child1">  
.child1 {
	width: 100px;
}

获取宽度:

var ele = document.getElementById('child1');
console.log(window.getComputedStyle(ele).width);  //100px

这种方法适用于任何设置 width 的方式,用于页面渲染完成后

3、dom.offsetWidth/offsetHeight

var ele = document.getElementById('child1');
console.log(ele.offsetWidth);  //100(注意:此处返回的是一个数值100)

这种方式是最常用的,也是兼容性最好的

4、window.screen.width/height

获取屏幕的宽高

5、document.body.scrollWidth/scrollHeight

获取网页全文的宽高

6、document.body.clientWidth/Height

获取可见区域的宽高(不加边线)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值