JS运动框架中关于offsetWidth的一个小bug

最新推荐文章于 2019-02-17 15:30:52 发布

曲奇小姐

最新推荐文章于 2019-02-17 15:30:52 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/weixin_41586886/article/details/81066488

Javascript 专栏收录该内容

44 篇文章

订阅专栏

本文探讨了一个关于JS运动框架中offsetWidth属性的小Bug，详细分析了在使用offsetWidth进行元素尺寸变化时出现的意外行为，即元素大小变化与预期相反的现象。通过具体示例代码，展示了如何设置定时器使div元素的宽度逐渐减小，但实际上却观察到元素变宽的情况。解释了offsetWidth属性包括border、width和margin总和，导致初始宽度为300px的div，在30毫秒后变为301px，从而呈现出变大的效果。同时，文章对比了一个正常情况下的例子，说明了速度大于物体的border值可以避免此类Bug的发生。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS运动框架中关于offsetWidth的一个小bug</title>
    <style>
    div{
      width:300px;
      height: 300px;
      background-color: pink;
      border:1px solid black;
    }
    </style>
  </head>
  <body>
    <div></div>
  </body>
   <script type="text/javascript">
   //这种情况下，我想当然的以为会出现div会慢慢变小的运动效果，但是实际上是这个div在慢慢变宽，原因在于：offsetWidth是包含了
   //border+width+margin的所有宽度，此时的div的offsetWidth是302，也就是说，最开始的width是300，30毫秒后width变成了
   //（302-1）=301px,所以会显现出变大了的效果
   setInterval(function(){
     var oDiv=document.getElementsByTagName('div');
     oDiv[0].style.width=oDiv[0].offsetWidth-1+'px';
   },30);


   //下面这个栗子是正常的，好像没有bug，原因在于速度大于物体的border值，恰好避免了bug的发生
   // var timer=null;
   // function startMove(obj,iTarget){
   //   clearInterval(timer);
   //   timer=setInterval(function(){
   //     var speed=(iTarget-obj.offsetWidth)/6;
   //     speed=speed>0?Math.ceil(speed):Math.floor(speed);
   //     if(obj.offsetWidth==iTarget){
   //       clearInterval(timer);
   //     }
   //     else{
   //       obj.style.width=obj.offsetWidth+speed+'px';
   //     }
   //   },30);
   // }
   // var oDiv=document.getElementsByTagName('div');
   // oDiv[0].onmouseover=function(){
   //   startMove(this,600);
   // }
   // oDiv[0].onmouseout=function(){
   //   startMove(this,300);
   // }

   </script>

</html>