JS获取和设置盒模型对应的宽和高的四种方法

工作中，对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="width: 100px" draggable="true">
        二十三年弃置身
    </div>
</body>
<script>
    var desk = document.getElementById("desk");
    console.dir(desk)
    console.dir(window.getComputedStyle(desk))
    console.dir(desk.getBoundingClientRect())
</script>

则控制台输出

bottom:42
height:42
left:0
right:100
top:0
width:100
x:0
y:0

建议亲自试一下以加深理解。

转载于:https://www.cnblogs.com/lemonmonster/p/9405838.html

JS获取和设置盒模型对应的宽和高的四种方法

悦读