如何使用JavaScript实现点击按钮修改元素的class类名？

实现方案 #

核心思路 #

• 定位到目标span元素和触发操作的按钮
• 给按钮绑定点击事件，触发时修改span的class属性

完整代码示例 #

<!-- 原有表格结构，给目标span加id方便定位，也可以用其他选择器 -->
<td>
  <span id="statusSpan" class="abc def">Deleted</span>
</td>

<!-- 触发修改的按钮 -->
<button id="changeClassBtn">修改样式类</button>

<script>
const changeBtn = document.getElementById('changeClassBtn')
const targetSpan = document.getElementById('statusSpan')

changeBtn.addEventListener('click', () => {
  // 方案1：直接完全覆盖class属性，适合不需要保留原有其他class的场景
  targetSpan.className = 'xyz pqr'

  // 方案2：仅替换指定class，保留其余自定义class，更灵活
  // targetSpan.classList.remove('abc', 'def')
  // targetSpan.classList.add('xyz', 'pqr')
})
</script>

补充说明 #

• 如果不想给span添加id，也可以用属性选择器直接匹配原有class定位：

  const targetSpan = document.querySelector('span[class="abc def"]')
  

• 如果span是动态渲染的元素，需要确保绑定事件时元素已经挂载到DOM树中，否则会定位失败。

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