循环内动态修改元素样式时px字符串导致marginLeft运算失败如何解决

解决方案 #

核心问题是带px后缀的字符串无法直接参与数值运算，同时原代码的循环逻辑也不符合「后一个元素marginLeft比前一个大300px」的需求，优化方案如下：

方案1（最推荐）：直接用循环索引计算数值

不需要读取元素style属性的字符串值，直接通过索引计算出每个元素的marginLeft数值，再拼接px后缀即可，逻辑更简洁性能更高：

function render() {
  var gElOptions = document.querySelector('.options');
  // 第一个元素的marginLeft基础值，可自行调整
  var baseMarginLeft = 100;
  for (var i = 0; i < 3; i++) {
    var elOptionBtn = document.createElement('button');
    elOptionBtn.textContent = '按钮' + (i+1); // 仅用于展示区分，可删除
    gElOptions.appendChild(elOptionBtn);
    elOptionBtn.className = `option-${i}`;
    // 直接计算数值：第i个元素的marginLeft = 基础值 + i*300，后一个比前一个大300
    elOptionBtn.style.marginLeft = (baseMarginLeft + i * 300) + 'px';
  }
}

对应HTML无需改动：

<body onload="render()">
  <div class="options">
  </div>
</body>

方案2：处理已有的带px的style值

如果你确实需要读取元素已有的marginLeft值再做运算，可以用parseInt()方法自动忽略px后缀，将字符串转为数值后再计算：

// 示例用法
var currentMargin = parseInt(elOption.style.marginLeft, 10); // 第二个参数10指定按十进制转换
elOption.style.marginLeft = (currentMargin + 300) + 'px';

原代码冗余点说明

你已经通过document.createElement拿到了新创建按钮的引用，不需要再调用querySelector重复查找该元素，直接操作创建好的元素对象即可。

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