如何检查HTML元素指定类，实现存在替换、不存在添加？

你的需求是给<header>元素替换或添加指定类名（first/second/third），原代码用classList.add()会导致多个目标类共存，以下是修正后的实现：

核心思路 #

先清除元素上已存在的所有目标类，再添加新的目标类，确保同一时间元素只有一个目标类。

完整代码示例 #

JavaScript

const banner = document.querySelector('header');

const classNames = [
  { image_url: "first" },
  { image_url: "second" },
  { image_url: "third" }
];

// 提取所有需要监控的目标类名
const targetClasses = classNames.map(item => item.image_url);

function initHeader(bg) {
  // 移除所有已存在的目标类
  targetClasses.forEach(cls => banner.classList.remove(cls));
  // 添加新的目标类
  banner.classList.add(bg.image_url);
}

// 测试调用
initHeader(classNames[0]);
initHeader(classNames[1]);
initHeader(classNames[0]);

CSS

.first {
  background-image: url('https://www.investmentmonitor.ai/wp-content/uploads/sites/7/2021/10/Warsaw-skyline-2-934x657-1.jpg');
}

.second{
  background-image: url('https://i.natgeofe.com/k/04665f4a-3f8d-4b62-8ca3-09ce7dfc5a20/france-eiffel-tower_4x3.jpg');
}

header {
  background-size: cover;
  background-position: center;
  height: 300px;
  width: 100%;
}

HTML

<header></header>

代码解释 #

1. targetClasses数组：从classNames中提取所有需要监控的类名，后续新增类只需修改classNames，无需调整函数逻辑。
2. 清除旧类：通过forEach遍历targetClasses，调用classList.remove()移除元素上所有已存在的目标类。
3. 添加新类：最后调用classList.add()添加传入的目标类，确保元素仅保留当前需要的类。

这样无论调用多少次initHeader，元素始终只会有一个目标类，不会出现重复添加的问题。

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