为何设置element.style.marginRight无效？附代码与问题细节

一、marginRight视觉不生效的问题 #

核心原因 #

你的.card_circle元素设置了position: absolute，但父容器.card未设置position: relative，导致这个绝对定位元素以body为定位参考系。同时，绝对定位元素的位置主要由left/right/top/bottom属性控制，单纯设置marginRight无法直观改变它的显示位置。

修复步骤 #

1. 修改CSS，设置定位上下文
   给.card添加相对定位，让圆形元素以卡片为参考：

.card {
    /* 保留原有样式 */
    position: relative;
}

2. 调整JavaScript逻辑，改用right属性控制位置
   把设置marginRight改为设置right属性，同时遍历所有卡片的圆形元素，确保每个卡片都生效：

function marginFunction(){
    // 选中所有maincard元素
    let cardList = document.querySelectorAll(".maincard");
    cardList.forEach(cardd => {
        let stle = cardd.offsetWidth;
        let circle = cardd.querySelector(".card_circle");
        let ml = (400 - stle)/10;
        // 用right属性控制偏移，替代marginRight
        circle.style.right = ml + "px";
        // 更新显示的数值
        document.querySelector(".abc").innerHTML = ml + "px";
    })
}
window.onresize = marginFunction;
// 页面加载时先执行一次，初始化样式
marginFunction();

二、脚本放</body>前提示函数未定义的问题 #

核心原因 #

如果脚本放在</body>标签前，若window.onresize = marginFunction的赋值语句写在函数定义之前，或者DOM未加载完成就执行代码，会导致函数未找到的错误。

修复方法 #

把代码包裹在DOM加载完成的监听事件中，确保函数先定义再赋值：

document.addEventListener('DOMContentLoaded', function() {
    function marginFunction(){
        // 这里放你的函数逻辑
        let cardList = document.querySelectorAll(".maincard");
        cardList.forEach(cardd => {
            let stle = cardd.offsetWidth;
            let circle = cardd.querySelector(".card_circle");
            let ml = (400 - stle)/10;
            circle.style.right = ml + "px";
            document.querySelector(".abc").innerHTML = ml + "px";
        })
    }
    window.onresize = marginFunction;
    marginFunction();
});

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