javascript - 如何动态更改 HTML 标签的 CSS 类？

Question

我正在使用 JavaScript。我有一个变量 var boolVal计算结果为 true/false .在我的页面上，我有一个 <div>标签:

<div id='div1' class="redClass"></div>

基于var boolVal的值，我想更改 <div> 的 CSS 类标记为 blueClass .

例如:现在的类(class)是<div>颜色为红色，那么新类应该在运行时使页面变为蓝色，而不需要刷新页面。

我们可以用简单的 JavaScript 实现吗？我们可以使用

document.getElementById("MyElement").className = "MyClass";

或者我们应该使用 AddClass ？

Answer 1

您可以使用classList 动态添加基于id 的CSS 类API如下:

document.getElementById('idOfElement').classList.add('newClassName');

还是老办法:

document.getElementById('idOfElement').className = 'newClassName';
// += to keep existing classes

---

或者，您可以使用下面显示的其他 DOM 查询方法来查找元素。最后三个返回一个集合，因此您必须对其进行迭代并将该类应用于集合中的每个元素(类似于下面给出的每个元素的示例)。

• querySelector

• querySelectorAll

  elements.forEach(element => element.classList.add('newClassName'));
  

• getElementsByClassName

  Array.from(elements).forEach(element => element.classList.add('newName'));
  

• getElementsByTagName

  Array.from(elements).forEach(element => element.classList.add('newName'));
  

---

在你的情况下

var element = document.getElementById('div1');
if(boolVal)
   element.className= 'blueClass'; // += ' blueClass'; to keep existing classes
else
   element.className= 'redClass';