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

1  2  3  4      5     12 13 14 
     
15 16 20 21 

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

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

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

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

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

1 var box=document.getElementById('box');2 //  这个属性有四个值top、right、left、bottom3 //  它是代表和页面上边和左边的距离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;

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