JavaScript使用for循环修改元素margin-top属性的代码错误排查

你的代码存在以下核心问题： #

• 只在初始化时获取了一次ball.style.marginTop的值，后续元素属性更新后，这个全局变量不会同步变动，拿到的一直是初始值
• ball.style.marginTop返回的是带px单位的字符串（例如"20px"），你直接遍历字符串的每个字符做拼接，逻辑完全错误，根本实现不了数值递增的效果
• 没有做数值提取转换，直接对字符串拼接'10px'只会得到"20px10px"这类非法属性值，浏览器无法识别

修正后的实现代码： #

moveButton.addEventListener('click', function moveDown() {
    // 每次点击都实时获取当前的marginTop值，提取数字部分转成整数，拿不到值默认取0
    const currentMargin = parseInt(ball.style.marginTop) || 0;
    // 递增10px后重新赋值给元素的marginTop属性
    ball.style.marginTop = `${currentMargin + 10}px`;
});

注意：如果你的ball元素的margin-top是写在CSS样式表而非内联style属性里，ball.style.marginTop会拿不到值，需要改用getComputedStyle(ball).marginTop来获取实时的样式值。

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