最近，在做一个项目的时候，要获取一个盒模型的宽度，那么当时想到的方法就是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;
这是对这周工作中遇到的一个小问题的总结。
时间： 2024-08-16 14:04:58