如何使用JavaScript修改指定HTML元素的className类名

方法1：使用classListAPI（最推荐） #

这种方式不会影响元素上已有的其他类名，仅针对性修改目标类，兼容性覆盖所有现代浏览器：

// 获取id为signin_button的元素
const signinBtn = document.getElementById('signin_button');
// 移除旧的pull-right类
signinBtn.classList.remove('pull-right');
// 添加新的pull-left类
signinBtn.classList.add('pull-left');

如果需要更简洁的写法，也可以链式调用：

document.getElementById('signin_button').classList.remove('pull-right').add('pull-left');

方法2：直接修改className属性 #

如果你明确当前元素的所有固定类名，不需要保留其他动态添加的类，可以直接全量覆盖类名属性：

const signinBtn = document.getElementById('signin_button');
signinBtn.className = 'btn btn-primary pull-left';

注意事项 #

需要确保执行代码时目标DOM元素已经加载完成，否则会因为找不到元素报错，推荐两种处理方式：

• 将JS代码放在HTML文件</body>标签之前执行
• 将代码包裹在DOM加载完成的监听事件中：

document.addEventListener('DOMContentLoaded', function() {
  const signinBtn = document.getElementById('signin_button');
  signinBtn.classList.remove('pull-right');
  signinBtn.classList.add('pull-left');
});

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