JS使用setAttribute设置position后返回undefined问题排查

代码存在两个核心问题：

• 混淆HTML属性与CSS样式属性：position、top、left 是CSS样式规则，不属于<img>标签的原生HTML属性。调用setAttribute()设置这类值只会把它们作为自定义属性写入HTML标签，既不会让样式生效，DOM元素实例本身也没有顶层的position属性，直接读取newImg.position必然返回undefined。
• 冗余DOM查询：将获取imagecontainer容器的逻辑写在for循环内部，每次循环都会触发一次DOM查询，存在无意义的性能开销。

所有样式相关属性需要通过元素的style对象设置，原生HTML属性可以直接赋值，同时把DOM查询逻辑移到循环外：

// 容器仅需查询一次，放在循环外
const container = document.getElementById('imagecontainer');
for (let i = 0; i < spell.length; i++){
  const spellItem = spell[i]
  const newImg = document.createElement('img');

  // 样式属性统一通过style对象赋值
  newImg.style.width = '25px';
  newImg.style.height = '25px';
  newImg.style.position = 'absolute';
  newImg.style.top = spellItem.top;
  newImg.style.left = spellItem.left;
  // src是img标签原生属性，可直接赋值
  newImg.src = spellItem.src;

  // 读取行内样式的position值需要从style下取
  console.log(newImg.style.position)
  container.appendChild(newImg);
}

如果你需要获取元素最终渲染生效的样式（比如样式写在CSS类中而非行内），直接读element.style拿不到值，需要用getComputedStyle方法获取计算后样式：

// 获取元素实际生效的position属性值
const actualPosition = window.getComputedStyle(newImg).position;

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