工作中，对dom元素取宽高位置的情况并不少见，这篇就总结一下，如何用JS设置和获取盒模型的宽和高，以及，哪种方式才是最优选择。
1. dom.style.width/height
这种方法只能获取到内联样式的宽和高，而样式一般不回以内联方式写，所以这种方式不适用现在大多数的开发；
2.dom.currentStyle.width/height
这种方式只适用于IE，直接PASS；
3.window.getComputedStyle(dom).width/height
getComputedStyle()是一个可以获取当前元素所有最终（划重点）使用的CSS属性值的方法；兼容性很好。
4.dom.getBoundingClientRect().width/height
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left,height,width,x,y共8个属性；兼容性很好。
rectObject = dom.getBoundingClientRect()
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
rectObject.width：元素宽度;
rectObject.height：元素高度;
rectObject.x：元素内容与视口的水平距离;
rectObject.y：元素内容与视口的垂直距离;
代码示例：
<style type="text/css"> body{ padding:0; margin:0; } #desk{ margin: 0px; } </style> <body> <div id="desk" style=" 100px" draggable="true"> 二十三年弃置身 </div> </body> <script> var desk = document.getElementById("desk"); console.dir(desk) console.dir(window.getComputedStyle(desk)) console.dir(desk.getBoundingClientRect()) </script>
则控制台输出
建议亲自试一下以加深理解。