JavaScript中点击事件触发时如何移除并替换元素属性？

先贴一个可正常运行的示例，你可以对照自己的代码排查差异：

示例代码 #

HTML

<div id="targetDiv" data-type="old" class="old-bg">点击我切换属性</div>

JavaScript

// 等待DOM完全加载后再绑定事件，避免元素未被找到
document.addEventListener('DOMContentLoaded', () => {
  const targetDiv = document.getElementById('targetDiv');
  
  targetDiv.addEventListener('click', function() {
    // 移除旧属性
    this.removeAttribute('data-type');
    this.removeAttribute('class');
    
    // 添加新属性
    this.setAttribute('data-type', 'new');
    this.setAttribute('class', 'new-bg');
    
    // 若只是替换同一属性的取值，无需remove，直接set即可覆盖旧值
    // 比如：this.setAttribute('data-type', 'new');
  });
});

常见导致removeAttribute无效的原因及排查方法 #

• 元素选择错误：检查获取div的方式是否正确，比如getElementById的id拼写、querySelector的选择器是否准确。可以在代码里加console.log(targetDiv)，如果输出null，说明未选中元素，自然无法操作属性。
• 事件绑定时机过早：如果JS代码写在<head>里且未等待DOM加载，此时div还未渲染，事件绑定会失效。解决办法是把JS放在<body>末尾，或者用DOMContentLoaded包裹事件逻辑。
• 属性名拼写错误：确认要移除的属性名完全正确，比如把data-type写成data-typee、class写成clas，都会导致removeAttribute找不到目标属性。可以用console.log(targetDiv.hasAttribute('你的属性名'))验证属性是否存在。
• 混淆Attribute和Property：部分DOM元素的状态是property（如input的checked、value），而非HTML attribute，这类属性用removeAttribute无效。自定义属性或普通HTML属性（如class、data-*）则可正常使用removeAttribute。

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