img.style.width doesn't work the same with img.width in JS

Question

the problem is as I was making the effect in this page:http://www.fgm.cc/learn/lesson9/01.htmlI found that if I wrote like "aImg[i].style.width=...." the images would flicker, but wouldn't when wrote like "aImg[i].width=.." I'm sure that the other codes are irrelevant to this problem so could anyone help answer this please? Here is the code:

window.onload = function() {
     var pics = document.getElementsByTagName("img");
     var menu = document.getElementById("menu");
     var aWidth = [];
     var k = 0;
     for (k = 0; k < 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 < 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 < 64 ? 64 : tdis; //**
             pics[i].width = tdis; //here!!**
             //pics[i].style.width = tdis + "px";
         }
     }

 }

#menu {
        position: absolute;
        width: 100%;
        bottom: 0;
        text-align: center;
      }

<body>
    <div id="menu">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
        <img src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg" alt="">
    </div>
</body>

Solved in this case

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.

Possible duplicate of [What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?](https://stackoverflow.com/questions/3562296/whats-the-difference-between-the-html-width-height-attribute-and-the-css-widt) — AmmoPT, Aug 28 '18 at 15:29
width/height **attribute** is totally different with width/height **style** — yqlim, Jan 01 '19 at 16:16

img.style.width doesn't work the same with img.width in JS

Solved in this case

0 Answers0