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方法，例如

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

在你的情况下

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

Answer 2

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

You can use Javascript for adding a class:

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

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

OR

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

Demo Fiddle

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

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

OR

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

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

或者只是使用jQuery添加类 -

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

Working Fiddle

Answer 3

这样的事情：

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

Answer 4

使用

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

Answer 5

您可以在DOM元素上编辑内联样式（如本例中的高度）：

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

基本语法是：

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

style属性的语法可能有所不同，可能与CSS文件中的语法不完全相同。例如，CSS文件中的background-color在上例中为“backgroundColor”。

Answer 6

您应该使用：

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

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

6 个答案: