对于盒模型的宽高获取填坑
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;
这是对这周工作中遇到的一个小问题的总结。
以上是关于对于盒模型的宽高获取填坑的主要内容，如果未能解决你的问题，请参考以下文章