Js:offsetWidth的Bug

来源：互联网发布：捰体p图软件编辑：程序博客网时间：2024/04/29 18:03

offsetWidth 得到的并不是当前元素width的宽度，而是当前元素盒模型的宽度。
例如：

#div1{width:200px; height:200px; border:1px solid black; background:red; padding:5px;}

<div>test<div>

这个时候的offsetWidth应该是200px+1px（左边框）+1px（右边框）+5px（左内边距）+5px（右内边距）

如果分不清这个会导致程序出问题。如下：

<script>    setInterval(funtion(){        var oDiv = document.getElementById("div1);        oDiv.style.width = oDiv.offsetWidth - 1 + "px";},30)</script>

<style>#div1{width:200px; height:200px; border:1px solid black; background:red;}</style>

<body>    <div id="id1"></div></body>

div1会越来越宽，而不是越来越窄。
因为定时器第一次执行时
offsetWidth是202px，-1之后是201px赋值给width（这里是元素的实际宽度）
定时器第二次执行时
offsetWidth是203px(201之前赋值给width的值+2边框),-1之后是202px赋值给width
……
所以div1会越变越宽而不是越变窄

0 0