当前位置：首页 > news >正文

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

news 来源：原创 2024/5/5 5:21:03

最近，在做一个项目的时候，要获取一个盒模型的宽度，那么当时想到的方法就是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;