如何使用Javascript更改元素中的一个类

如果我有一个具体化的库和一个元素“h1”，如何使用javascript将其背景颜色“黑色”更改为“白色”？例如，使用按钮

<h1 class="black red-text">Test</h1>

测试

给元素一个id：

<h1 id="test" class="black red-text">Test</h1>

然后，您可以使用以下代码删除black类：

el.classList.remove('black');

并附加新类：

el.classList.add('white');

---

创建一个函数和一个

white

类。在函数内部使用

document.getElementsByClassName

。由于

document.getElementsByClassName

是一个集合，因此需要使用类似

[0]

的索引来访问它

函数changeColor（）{
document.getElementsByClassName（“黑色”）[0].classList.add（“白色”）
}

.white{
背景：白色！重要；
}
布莱克先生{
背景：黑色；
}
.红色文本{
颜色：红色；
}

测试
更改颜色

根据具体化约定，保持事物整洁的一种方法是添加或删除类名，从而触发预先存在的样式。注意，如果有多个元素共享该类，则可能需要更具体的选择器：

document.querySelector('h1.black').classList.add('white');

Materialize已经有了大量的应用程序，因此无需创建新的应用程序

代码笔：

我只是想澄清一下：

document.querySelector（'h1.black'）

-它查找具有匹配类的元素。您还可以使用ID来更具体地描述，而

.classList

检索应用于该元素的所有类（在本例中为

.black

和

.red text

）和

.add（'white'）

——这将添加您在括号中声明的类。

答案如下

使用

文档选择元素。getElementById

然后点击按钮

您可以使用title.classList.toggle（“白色”）；切换给定的类

const-button=document.getElementById（'btn'）；
const title=document.getElementById（'title'）；
btn.addEventListener（'单击'，（）=>{
title.classList.toggle（“白色”）；
});
。红色文本{
颜色：红色；
}
布莱克先生{
背景色：#000；
}
怀特先生{
背景色：#fff；
}
测试
更改Bg
希望这能解决您的问题。如果不添加该类，只需检查该类是否已经存在


let h1=document.querySelector（“.red text”）；
设btn=document.querySelector（“#btn”）；
函数changeColor（）{
if（h1.classList.contains（“黑色”））{
h1.类列表。删除（“黑色”）；
h1.类列表。添加（“白色”）；
}否则{
h1.类列表。添加（“黑色”）；
h1.类列表。删除（“白色”）；
}
}
btn.addEventListener（“单击”，更改颜色）
.black{
背景：黑色；
颜色：红色
}
怀特先生{
背景：白色；
}
测试
更改颜色
Hi Quak，我们需要看到您目前的尝试。如果我们给你答案，你什么也学不到！铁匠：对不起，我会在以后的帖子中记住这一点。你是对的，我不会通过得到直接的答案学到任何东西。因此，如果我添加白色类，黑色类将自动删除？它不会被删除，但会被覆盖：编辑答案。请现在检查一下。
document.querySelector('h1.black').classList.add('white');