📌  相关文章
📜  如何在 JavaScript 中动态创建和应用 CSS 类?

📅  最后修改于: 2021-10-29 06:18:11             🧑  作者: Mango

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

方法:

  • 用于在 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.

                         


输出:

点击按钮前:

点击按钮后: