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

Question

我正在使用JavaScript.我有一个变量var boolVal,其值为true/false.在我的页面上,我有一个div标签.

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

基于值var boolVal,我想将DIV标签的CSS类更改为blueClass.

例如:Present类使DIV颜色为红色,然后新类应该在运行时使页面变为蓝色,而不需要页面刷新.

我们可以用简单的JavaScript实现这一点吗？

我们可以用吗？

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

或者我们应该使用AddClass？

Answer 1

您可以id动态添加css类,如下所示:

document.getElementById('idOfElement').className = 'newClassName';

或使用 classList

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

或者,您可以使用其他DOM方法

• querySelector
• querySelectorAll
• getElementsByClassName
• getElementsByTagName

等找到元素.最后三个返回一个集合,因此您必须迭代它并将该类应用于每个元素,如上所示.

在你的情况下

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

Answer 2

首先，AddClass不是纯Javascript的方法。它与jQuery有关。

您可以使用 Javascript 添加一个类：

setAttribute并且className这两种方法都用于设置类（类属性），这些方法不用于在现有类中添加另一个类。

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

或者

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

演示小提琴

所以如果你想将一个 css 类附加到一个元素，你可以这样做 -

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

或者

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

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

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

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

工作小提琴