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

Question

我正在使用JavaScript。我有一个变量var boolVal，可能会评估为true/false。在我的页面上，我有一个<div>标签:

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

根据变量var boolVal的值，我想要改变<div>标签的CSS类为blueClass。

例如：当前类使<div>颜色为红色，则在运行时应该无需刷新页面即可将页面变为蓝色。

我们能否在简单的JavaScript中实现这一点？可以使用吗？

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

或者我们应该使用 AddClass？

- variable

Answer 1

您可以使用classList API 根据 id 动态添加 CSS 类，如下所示：

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';

- T J

Answer 2

首先，AddClass 不是纯 JavaScript 方法，它与 jQuery 相关。

您可以使用 JavaScript 添加类：

setAttribute 和 className 方法都用于设置类（class 属性），这些方法不用于向已有的类添加另一个类。

document.getElementById('div1').setAttribute( "class", "blueClass" );

或者

document.getElementById('div1').className="redClass";

演示 Fiddle

如果您想向一个元素添加CSS类，可以像这样操作 -

 document.getElementById('div1').setAttribute( "class", document.getElementById('div1').getAttribute('class') + " blueClass" );

或者

 document.getElementById('div1').className +=" redClass";

注意：使用这种方式，同一个类可以被添加多次。这只是使用JavaScript完成此工作的技巧，不是完美的解决方案。

或者简单地使用jQuery添加类 -

$("#div1").addClass("blueClass");

工作中的 Fiddle

- Ishan Jain

Answer 3

类似这样：

document.getElementById("MyElement").className = boolVal ? "redClass" : "blueClass";

- dfsq

Answer 4

使用

document.getElementById('div1').className='blueClass';

- Suman Bogati

---

仅使用className =将清除其他类。 - T J

Answer 5

你可以像这样在 DOM 元素上编辑内联样式（本例中为高度）：

document.getElementById("element").style.height = height + "px";

基本语法如下：

document.getElementById("div1").style.[style property] = [value];

样式属性的语法可能会有所不同，可能与CSS文件中的语法不完全相同。例如，在CSS文件中，background-color将在上面的示例中变为'backgroundColor`。

- Scott

Answer 6

你应该使用：

    boolVal.onchange=function(){
                document.getElementById("MyElement").className = boolVal ? "redClass" : "blueClass";
    };

- Norbert Pisz