如何使用 JavaScript 更改元素的样式/类？

在本文中，我们将学习如何更改元素的样式/类。如果你想建立一个很酷的网站或应用程序，那么 UI 起着重要的作用。在 JavaScript 的帮助下，我们可以在任何事件发生时更改、添加或删除 HTML 元素中的任何 CSS 属性。有两种方法可以让我们完成这项任务。

方法 1：借助 style 属性更改 CSS：

句法：

document.getElementById("id").style.property = new_style

示例：在此示例中，我们构建了一个 PAN 号码验证器。首先，我们将获取输入值并将其与正则表达式模式匹配。如果匹配，则使用 JavaScript 在

标记上添加内联样式。否则，在

标签上添加不同的样式。

HTML

  

    
        GeeksforGeeks
    
  
    
        How can the style/class of
        an element be changed?
    
  
    Validate Pan Number
  
    
    
    Validate
  
    
        const btn = document.getElementById("submit");
        btn.addEventListener("click", function () {
            const pan = document.getElementById("pan").value;
            const para = document.querySelector("p");
  
            let regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;
            if (regex.test(pan.toUpperCase())) {
                para.innerHTML = "Hurrey It's correct";
  
                // Inline style
                para.style.color = "green";
            } else {
                para.innerHTML = "OOps It's wrong!";
  
                // Inline style
                para.style.color = "red";
            }
        });
    

  

输出：

方法 2：更改类本身——我们可以使用两个可用于操作类的属性。

1. classList 属性： classList是一个只读属性，它以 DOMTokenList 对象的形式返回元素的 CSS 类名。

句法：

document.getElementById("id").classList

您可以使用下面提到的方法分别添加类、删除类和在不同类之间切换。

• add() 方法：它添加一个或多个类。
• remove() 方法：它删除一个或多个类。
• toggle() 方法：如果类不存在，则添加它并返回 true。它删除类并返回 false。第二个布尔参数强制添加或删除类。

例子：

HTML

  

    
        .hide {
            display: none;
        }
  
        .blueColor {
            color: blue;
        }
    

  

    
        GeeksforGeeks
    
      
    
        How can the style/class of
        an element be changed?
    
      
    Hide and Show the Para
      
    
        GeeksforGeeks is a computer science portal
        for geeks. This platform has been designed
        for every geek wishing to expand their
        knowledge, share their knowledge, and is
        ready to grab their dream job. GFG have
        millions of articles, live as well
        as online courses, thousands of tutorials
        and much more just for the geek inside you.
    
      
    Hide
    Show
    Change Color
  
    
        const btn_hide = document.getElementById("hide");
        const btn_show = document.getElementById("show");
        const btn_color = document.getElementById("color");
  
        const para = document.querySelector("p");
        btn_hide.addEventListener("click", function () {
            para.classList.add("hide");
        });
  
        btn_show.addEventListener("click", function () {
            para.classList.remove("hide");
        });
  
        btn_color.addEventListener("click", function () {
            para.classList.toggle("blueColor");
        });
    

  

输出：

在上面的示例中，我们定义了两个操作类“hide”和“toggleColor”，它们分别隐藏一个元素并将颜色更改为蓝色。当点击隐藏按钮时，隐藏类被添加到隐藏它的“p”标签中。单击“显示”按钮时，它会从“p”标签中删除当前的隐藏类。当单击更改颜色按钮时，它会将“toggleColor”类添加到 p 标签（这使文本颜色变为蓝色），当再次单击时，它会删除 toggleColor 类。

2. className 属性：该属性用于将元素的当前类设置为指定的类。

句法：

document.getElementById("id").className = class

例子：

HTML

  

    
        .colorBlue {
            color: blue;
        }
  
        .colorRed {
            color: red;
        }
    

  

    
        GeeksforGeeks
    
      
    
        How can the style/class of 
        an element be changed?
    
      
    className Example
      
    
        GeeksforGeeks is a computer science portal
        for geeks.This platform has been designed
        for every geek wishing to expand their
        knowledge, share their knowledge and is
        ready to grab their dream job. GFG have
        millions of articles, live as well
        as online courses, thousands of tutorials
        and much more just for the geek inside you.
    
      
    Change Color
  
    
        const btn = document.getElementById("submit");
        const para = document.querySelector("p");
  
        btn.addEventListener("click", function () {
            para.className = "colorRed";
        });
    

  

输出：

在上面的示例中，现有的 ColorBlue 类使用 className 属性设置为 colorRed 类，该属性将字体颜色从蓝色变为红色。