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

问题描述

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

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

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

例如:present类使< div> 颜色变为红色，然后新类应在运行时使页面变为蓝色，而无需刷新页面.

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

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

还是我们应该使用 AddClass ?

解决方案

您可以使用 querySelector

querySelectorAll

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

getElementsByClassName a>

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

getElementsByTagName

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

---

以您的情况

  var元素= document.getElementById('div1');如果(boolVal)element.className ='blueClass';//+ ='blueClass';保持现有的班级别的element.className ='redClass'; 

I am using JavaScript. I have a variable var boolVal that either evaluates to true/false. On my page, I have a <div> tag:

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

Based on the value of var boolVal, I want to change the CSS class of the <div> tag to blueClass.

For example: present class makes <div> color red, then the new class should make the page blue at runtime without need for page refresh.

Can we achieve this in simple JavaScript? Can we use

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

or should we use AddClass?

解决方案

You can add a CSS class based on id dynamically using classList API as follows:

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

Or the old way:

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

---

Alternatively you can use other DOM query methods shown below to find elements. The last three return a collection so you'll have to iterate over it and apply the class to each element in the collection (similar to the example given below each).

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

---

In your case

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

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