JS运动之offsetWidth属性的小bug

最新推荐文章于 2022-10-25 13:39:59 发布

熊喵先生

最新推荐文章于 2022-10-25 13:39:59 发布

阅读量1.8k

点赞数

分类专栏： web前端---JavaScript JavaScript浅谈系列文章标签： JS offsetWidth bug

本文链接：https://blog.csdn.net/u013064109/article/details/44424149

版权

本文探讨了在JS动画中使用offsetWidth属性时可能遇到的一个小bug，即元素在预期向左移动时实际上向右移动。原因是offsetWidth包含了边框宽度，当减去1像素时，由于边框影响，元素宽度反而增加，导致运动方向相反。通过将width设置为行内样式可以避免这个问题。

摘要由CSDN通过智能技术生成

JS运动之offsetWidth属性的小bug

大家对于offsetWidth属性是否真正了解呢？？？？？？？？它的值大小仅仅等于width的值吗？？？？？？？接下看个小案例就明白了。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
        <style>
         #div1{
          width:200px;
          height: 200px;
          background: yellow;
          border:1px solid purple;
         }
        </style>
        <script>
           setInterval(function(){
            var oDiv=document.getElementById("div1");
            oDiv.style.width=oDiv.offsetWidth-1+'px';
           },30);
        </script>
 </head>
 <body>
  <div id="div1"></div>
 </body>
</html>

看到以上简单的不能再简单的代码，大家认为是向那边运动呢？