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

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

方法：

• 用于在 JavaScript 中添加类的className 属性。它会覆盖所选元素的现有类。如果我们不想覆盖，那么我们必须在类名前添加一个空格。

  // 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");
  

• 在向元素添加新类后，我们选择新类（测试），然后借助 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";
  }
  

下面是这个的实现：

例子：

HTML

  

    

  

     Welcome to gfg 
  
    Hi it's me.
  
  
    
        Apply css dynamically
    
      
    
        function apply() {
            // It overwrites exisiting classes
            var h2 = document.querySelector("h2");
            h2.className = "test";
  
            // Add new classe to exisiting classes
            var p = document.querySelector("p");
            p.classList.add("test");
  
            // Sellect 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";
            }
        }
    

  

输出：

点击按钮前：

点击按钮后：