JS运动之offsetWidth属性的小bug

谁借莪１个温暖的怀抱￠ 2022-08-07 06:40 160阅读 0赞

## 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>

**看到以上简单的不能再简单的代码，大家认为是向那边运动呢？？？？？**  
向左还是向右呢？？？如果左边的话，相信大家肯定和犯了同一个错误。其实答案是右边，大家肯定会疑问不是-1吗？？答案如下:

如果我把border:1px solid purple;加入到CSS样式中/\*把border的值加上的话则会产生一个小bug就是div不会向左变短反而会向右变大  
  
\* 为什么会出现这样的情况的呢？？？  
\* 这是因为开始width为200px;而当前的offsetWidth的值是等于边框值加上width的值故offsetWidth=202px;  
\* oDiv.offsetWidth-1+'px';//相等于202-1=201赋给width;  
\* 下次的width为201px;下下次就是202px;依次下去width的值反而会增加故会往右边运动  
\* 如果是oDiv.offsetWidth-2+'px';会发现div会一直不动，因为不难分析202-2=200px;  
\* 下次的width为200px和原来初始的情况一样，依次下去始终还是一样200px;所以会不动；  
\* 那如何解决这个问题呢？？  
\* 很简单。  
\* 就是把width属性变为行间样式，不用offsetWidth;  
\* \*/

解决后的代码:

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

这个是本人学习JS中遇到一个小问题，特把小问题提出，本人菜鸟，求大神们多多指教