如何用JavaScript通过ID修改元素ID与类名？类名修改失败解决方案

Hey there! Let's break down your two questions clearly, starting with the basics and then fixing that class name issue you're hitting.

1. 如何用JavaScript通过ID修改元素的ID和类名？ #

修改元素ID #

要修改元素的ID，你可以直接通过元素对象的id属性赋值：

// 获取目标元素
const element = document.getElementById('original-id');
// 修改ID
element.id = 'new-id';

修改元素类名 #

修改类名有几种常用方式，按需选择：

• 直接替换类名：使用className属性（注意是驼峰命名，不是classname），适合完全替换现有类的场景

  element.className = 'new-class';
  

• 灵活操作单个类：使用classList API，适合需要保留其他类、添加/移除指定类的场景

  // 添加类
  element.classList.add('new-class');
  // 移除类
  element.classList.remove('old-class');
  // 切换类（存在则移除，不存在则添加）
  element.classList.toggle('toggle-class');
  

2. 解决你的类名修改失败问题 #

Let's look at your code and spot the two key issues causing the failure:

问题1：修改ID后，无法再通过原ID获取元素 #

你先把元素ID从one改成了two，紧接着又用document.getElementById('one')去获取元素——这时候页面上已经没有ID为one的元素了，这个调用会返回null，自然没法修改类名。

问题2：classname拼写错误 #

JavaScript里DOM元素的类名属性是驼峰命名的className，不是全小写的classname，拼写错误会导致代码完全无效。

修正后的代码 #

这里有两种可靠的写法，任选其一即可：

写法1：先保存元素引用，避免重复查找

<style>
.one{ background: red; }
.two{ background: yellow; }
</style>

<div onclick="test_fn()"> CLICK HERE </div>
<br>
<div id="one" class="one"> test </div>

<script>
function test_fn(){
  // 先获取元素并保存到变量里，后续直接用变量操作
  const targetElement = document.getElementById('one');
  // 修改ID
  targetElement.id = 'two';
  // 修改类名（注意是className）
  targetElement.className = 'two';
}
</script>

写法2：使用classList（更推荐，扩展性更强）

如果以后这个元素可能需要保留其他类，classList的操作会更安全，不会覆盖已有类：

function test_fn(){
  const targetElement = document.getElementById('one');
  targetElement.id = 'two';
  // 移除旧类，添加新类
  targetElement.classList.remove('one');
  targetElement.classList.add('two');
}

这样修改后，点击按钮时元素的ID和类名都会成功更新，背景色也会从红色变成黄色啦！

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