10.8 如何用js验证一下boz-sizing样式对块级盒子大小的影响？

LIYI

发布于 2020-10-26 15:49:44

9260

发布于 2020-10-26 15:49:44

文章被收录于专栏：艺述论专栏艺述论专栏

如何用js验证一下boz-sizing样式对块级盒子大小的影响？

可以用getClientRects方法，获取元素的边界矩形的矩形集合。

document.querySelector("#medium").getClientRects()[0].width
document.querySelector("#thick").getClientRects()[0].width

使用getBoundingClientRect验证

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。

1，如果是标准盒子模型，如果box-sizing: content-box，元素的尺寸等于width/height + padding + border-width的总和。

2，如果box-sizing: border-box，元素的的尺寸等于 width/height。

返回接口与上面的方法是一样的。

另外，使用clientWidth查看内部宽度

Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。

代码：

    <h1>关于getBoundingClientRect验证示例1</h1>
    <div id="x">Border Box</div>
    <script>
        var x = document.querySelector("#x");
        console.log('getBoundingClientRect().width =', x.getBoundingClientRect().width);
        console.log('getComputedStyle(x).width =', getComputedStyle(x).width);
</script>
    <style>
        #x {
            border: 20px solid blue;
            padding: 10px;
            width: 140px;
            box-sizing: border-box;
        }
</style>
    <h1>关于getBoundingClientRect验证示例2</h1>
    <div id="x1">Border Box1</div>
    <script>
        var x1 = document.querySelector("#x1");
        console.log('getBoundingClientRect().width =', x1.getBoundingClientRect().width);
        console.log('getComputedStyle(x1).width =', getComputedStyle(x1).width);
</script>
    <style>
        #x1 {
            border: 20px solid blue;
            padding: 10px;
            width: 80px;
            box-sizing: content-box;
        }
    </style

输出：

虽然样式里宽度不同，但是输出的getBoundingClientRect().width相同。

当我们将width样式改为相同的值以后，输出便不同了。效果：

9月29日

【关于作者】

李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。

参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-10-09，如有侵权请联系 cloudcommunity@tencent.com 删除

border