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

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

方法：

className 属性用于在JavaScript中添加类。它覆盖了所选元素的现有类。如果我们不希望覆盖，则必须在类名之前添加一个空格。

//它覆盖了现有的类

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

//添加新类到现有类
//注意新类名之前的空格

h2.className = " test";

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

//添加新类到现有类

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

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

//选择所有具有test类的元素

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

//应用CSS属性
for (var i = 0; i < temp.length; i++) {
  temp[i].style.color = "white";
  temp[i].style.backgroundColor = "black";
}

示例： 下面是实现代码：

<h2 class="hello"> 欢迎来到gfg </h2>
  
<p id="hi">嗨，这是我。</p>
  
<button onclick="apply()">
    应用动态CSS
</button>
  
<script>
    function apply() {
        //它覆盖现有的类
        var h2 = document.querySelector("h2");
        h2.className = "test";
      
        //添加新类到现有类
        var p = document.querySelector("p");
        p.classList.add("test");
      
        //选择所有具有test类的元素
        var temp = document.querySelectorAll(".test");
      
        //应用CSS属性
        for (var i = 0; i < temp.length; i++) {
            temp[i].style.color = "green";
            temp[i].style.fontSize = "40px";
        }
    }
</script>

输出：

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