JS | JS之深入理解客户区尺寸client系列属性

目录

一、客户区大小

clientHeight

clientWidth

clientLeft

clientTop

二、页面大小

三、注意事项


关于元素尺寸,一般地,有偏移大小offset、客户区大小client和滚动大小scroll。前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client。

一、客户区大小

客户区大小client指的是元素内容及其内边距所占据的空间大小

clientHeight

clientHeight属性返回元素节点的客户区高度

element.clientHeight = padding-top + height + padding-bottom

包含padding 不包含 border 和 margin以及水平滚动条的高度 

clientWidth

clientWidth属性返回元素节点的客户区宽度

element.clientWidth = padding-left + width + padding-right

包含padding 不包含 border 和 margin以及垂直滚动条的宽度 

clientWidth / clientHeight示例:

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div>
<script>
//120(10+100+10)
console.log(test.clientHeight);
console.log(test.clientWidth);
</script>

注意:滚动条宽度不计算在内

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll"></div>
<script>
//103(120-17),滚动条宽度为17px
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值