对于盒模型的宽高获取填坑

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对于盒模型的宽高获取填坑相关的知识,希望对你有一定的参考价值。

        最近,在做一个项目的时候,要获取一个盒模型的宽度,那么当时想到的方法就是el.style.width.我们先看一段代码。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>juke</title>
 5     <style type="text/css">
 6         #box {
 7             width: 300px;
 8             height: 300px;
 9             border: 1px solid #000;
10         }
11     </style>
12 </head>
13 <body>
14 <div id="box"></div>
15 
16 <script type="text/javascript">
17     var width = document.getElementById("box").style.width;
18     console.log(width);  // ""
19 </script>
20 </body>
21 </html>

        最后输出的是"",很诧异为什么获取不到宽度呢?当我们把第14行的代码改动一下,<div id="box" style="width=300px"></div>这时候我们就获取到了宽度值,那么对于这种获取的方法,我们可以看出,只能获取到内嵌样式的宽高,而对于其他的形式是获取不到的。

        现在,我们来思考一下,我们要怎么去获取到不是内嵌样式的宽高呢?看了很多资料,有这些办法使我们能使用的。

 1 el.currentStyle.width; // 但是这个方法有局限性,那就是只有IE才支持 

        那么还有没有其他的办法呢,当然有。window.getComputedStyle(dom),这个方法能获取当前元素css的最终属性值,那么这个方法就没有局限性了吗,答案是当然是有的,这个方法我们只能用来获取,不能用来设置,这就是这个方法的局限性。

        还有一种方法,请看下面的代码:

1 var box=document.getElementById(‘box‘);
2 //  这个属性有四个值top、right、left、bottom
3 //  它是代表和页面上边和左边的距离
4 box.getBoundingClientRect().top;  //  元素上边到视窗上边的距离
5 box.getBoundingClientRect().right //  元素右边到视窗左边的距离
6 box.getBoundingClientRect().bottom; //  元素下边到视窗上边的距离
7 box.getBoundingClientRect().left; //  元素左边到视窗左边的距离
8 
9 //  获得元素的宽高,说一点在标准盒子模型下,他获取到的盒子的宽度是content-width+border+padding  而在IE盒子模型下他获取到的是你设置的宽度,因为在IE盒子模型下padding和border是算在width里的
10
box.getBoundingClientRect().width;

这是对这周工作中遇到的一个小问题的总结。

 

以上是关于对于盒模型的宽高获取填坑的主要内容,如果未能解决你的问题,请参考以下文章

CSS盒模型

显示方式+盒模型相关

前端面试题汇总 2018/12/04

什么是盒模型?

box-sizing设置

content-box和border-box