JavaScript 如何动态创建和应用CSS类

在本文中，我们将看到如何使用JavaScript动态创建CSS类并将其应用到元素上。为此，首先我们创建一个类并将其分配给我们想要应用CSS属性的HTML元素。我们可以在JavaScript中使用 className 和 classList属性 。

方法：

使用 className属性 可以在JavaScript中添加一个类。它会覆盖所选元素的现有类。如果不想覆盖现有类，则必须在类名之前添加空格。

// It overwrites existing classes 

var h2 = document.querySelector("h2");
h2.className = "test";

// Add new class to existing classes
// Note space before new class name

h2.className = " test";

classList属性也可用于在JavaScript中添加类，但它不会覆盖现有的类，并将新类添加到选定的元素的类列表中。

// Add new class to existing classes

var p = document.querySelector("p");
p.classList.add("test");

在向元素中添加新类之后，我们选择新类（test），然后借助JavaScript中的style属性将CSS属性应用于它。

// Select all elements with class test 

var temp = document.querySelectorAll(".test");

// Apply CSS property to it
for (var i = 0; i < temp.length; i++) {
  temp[i].style.color = "white";
  temp[i].style.backgroundColor = "black";
}

示例： 下面是实现的代码:

<h2 class="hello"> Welcome to gfg </h2> 
  
<p id="hi">Hi it's me.</p> 
  
<button onclick="apply()"> 
    Apply css dynamically 
</button> 
  
<script> 
    function apply() { 
        // It overwrites existing classes 
        var h2 = document.querySelector("h2"); 
        h2.className = "test"; 
      
        // Add new class to existing classes 
        var p = document.querySelector("p"); 
        p.classList.add("test"); 
      
        // Select all elements with class test 
        var temp = document.querySelectorAll(".test"); 
      
        // Apply CSS property to it 
        for (var i = 0; i < temp.length; i++) { 
            temp[i].style.color = "green"; 
            temp[i].style.fontSize = "40px"; 
        } 
    } 
</script>

输出：

JavaScript 如何动态创建和应用CSS类