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

时间 2019-12-01

标签对于模型获取繁體版

原文原文链接

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

 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>这时候咱们就获取到了宽度值，那么对于这种获取的方法，咱们能够看出，只能获取到内嵌样式的宽高，而对于其余的形式是获取不到的。css

如今，咱们来思考一下，咱们要怎么去获取到不是内嵌样式的宽高呢？看了不少资料，有这些办法使咱们能使用的。html

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

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

还有一种方法，请看下面的代码：spa

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;

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