如何动态更改DIV标签的CSS类？ [英] How to dynamically change CSS class of DIV tag?

问题描述

我使用的是JavaScript。我有一个变量（var boolVal），计算结果为true / false。
在我的页面上有一个div标签。

I am using JavaScript. I have a variable (var boolVal)that either evaluates to true/false. On my page I have a a div tag.

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

根据 var boolVal 的值，我想将DIV标签的css类更改为blueClass。

Based on the value of var boolVal, I want to change the css class of the DIV tag to blueClass.

例如：Present类使DIV颜色为红色，那么新类应该使页面在运行时变为蓝色，而不需要页面刷新。

For example: Present class makes DIV color red, then the new class should make the page blue at runtime without need for page refresh.

我们可以在简单的javascript中实现吗？

Can we achieve this in simple javascript?

我们可以使用 document.getElementById（MyElement）。className =MyClass; ？或者我们应该使用 AddClass ？

Can we use document.getElementById("MyElement").className = "MyClass";? or should we use AddClass?

推荐答案

基于 id 动态如下：

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

或使用 classList

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

或者，您也可以使用其他DOM方法，例如

Alternatively you can use other DOM methods like

• querySelector


• getElementsByClassName


• getElementsByTagName


• querySelectorAll

• querySelector
• getElementsByClassName
• getElementsByTagName
• querySelectorAll

等来查找元素。最后三个返回一个集合，所以你必须迭代它，并应用到每个元素如上所示的类。

etc to find elements. The last three return a collection so you'll have to iterate over it and apply the class to each element as shown above.

if(boolVal)
   document.getElementById('div1').className= 'blueClass';
else
   document.getElementById('div1').className= 'redClass';

这篇关于如何动态更改DIV标签的CSS类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！