原生JavaScript修改marginRight不生效 图片无法移动问题排查

问题原因 #

• margin属性使用逻辑错误：负的margin-right只会缩小元素右侧的外边距，允许后续元素占据自身右侧的空间，不会改变元素自身的左对齐位置，自然无法实现元素向右偏移的效果。
• 元素宽度撑满父容器：你给div img设置了width:100%，而父div的宽度是100vw，img已经完全撑满父容器的水平可用空间，此时修改margin-right无法影响img本身的水平位置，只会改变img的外部可占用空间，视觉上没有位移效果。
• 如果你实际需要移动的是包含图片的整个div容器，操作img的margin本身就不符合预期，.normal类的div是绝对定位，直接操作容器的定位属性效率更高。

解决方案 #

方案1：修改margin-left实现偏移 #

要实现元素向右偏移，直接给元素设置正值的margin-left即可，修改你的JS代码如下：

window.onload=function(){
    const normal = document.getElementById('normal');
    const scaled = document.getElementById('scaled');
    let runner =0;
    setInterval(function(){
        // 替换marginRight为marginLeft，设置正值
        normal.style.marginLeft = runner + "px";
        scaled.style.marginLeft = runner + "px";
        runner++;
        console.log("respons - " + runner + "px")
    },50);
}

方案2：使用transform实现位移（性能更优） #

transform属性不会触发页面重排，动画性能更高，注意要保留scaled元素原有的scale属性：

window.onload=function(){
    const normal = document.getElementById('normal');
    const scaled = document.getElementById('scaled');
    let runner =0;
    setInterval(function(){
        normal.style.transform = `translateX(${runner}px)`;
        // 保留原有的scale效果，拼接translateX
        scaled.style.transform = `scale(120%) translateX(${runner}px)`;
        runner++;
        console.log("respons - " + runner + "px")
    },50);
}

方案3：直接操作父容器的定位属性（适合移动整个模块） #

如果你需要移动的是包含图片的整个div容器，可以给div加上id后操作绝对定位的left属性：
首先修改HTML：

<div class="normal" id="normalWrap">
    <img src="whiteboard.jpeg">
</div>
<div class="scaled" id="scaledWrap">
    <img src="whiteboard.jpeg">
</div>

再修改JS：

window.onload=function(){
    const normalWrap = document.getElementById('normalWrap');
    const scaledWrap = document.getElementById('scaledWrap');
    let runner =0;
    setInterval(function(){
        normalWrap.style.left = runner + "px";
        scaledWrap.style.left = runner + "px";
        runner++;
        console.log("respons - " + runner + "px")
    },50);
}

内容的提问来源于stack exchange，提问作者Tryym