title: img.style.width doesn't work the same with img.width in JS
body: <p>the problem is as I was making the effect in this <a href="http://www.fgm.cc/learn/lesson9/01.html" rel="nofollow noreferrer">page:http://www.fgm.cc/learn/lesson9/01.html</a>I found that if I wrote like &quot;aImg[i].style.width=....&quot; the images would flicker, but wouldn't when wrote like &quot;aImg[i].width=..&quot; I'm sure that the other codes are irrelevant to this problem so could anyone help answer this please?
  Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
       var pics = document.getElementsByTagName("img");
       var menu = document.getElementById("menu");
       var aWidth = [];
       var k = 0;
       for (k = 0; k &lt; pics.length; k++) {
           aWidth.push(pics[k].offsetWidth);
           pics[k].width = parseInt(pics[k].offsetWidth / 2)
       }
       document.onmousemove = function(e) {
           var e = e || window.event;
           for (var i = 0; i &lt; pics.length; i++) {
               var disx = e.clientX - pics[i].offsetLeft - pics[i].offsetWidth / 2;
               var disy = e.clientY - pics[i].offsetTop - menu.offsetTop - pics[i].offsetHeight / 2;
               var r = Math.sqrt(disy * disy + disx * disx);
  
               var tdis = (128 - r * 128 / 300);
               tdis = tdis &lt; 64 ? 64 : tdis; //**
               pics[i].width = tdis; //here!!**
               //pics[i].style.width = tdis + "px";
           }
       }
  
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu {
          position: absolute;
          width: 100%;
          bottom: 0;
          text-align: center;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="menu"&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
          &lt;img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt=""&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <hr />
  <h1>Solved in this case</h1>
  <p>I add two spans to show the value of style.width and width then find out they are slightly different by which I mean the former one is a float while the latter is always an integer. So I wrote like parseInt(.style.width) by which I stopped the flicker. Though I still don't know why it matters. I guess the images don't have to change that frequently.</p>