JavaScript 如何更改元素的样式/类别

在本文中，我们将学习如何更改元素的样式/类别。如果你想创建一个很酷的网站或应用程序，那么用户界面(UI)发挥着重要的作用。我们可以在发生任何事件时使用JavaScript从HTML元素中更改、添加或删除任何CSS属性。有两种常见的方法可以实现这个任务。

style.property
直接更改类别
方法1： 使用style属性更改CSS：

语法：

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

示例： 在这个示例中，我们构建了一个个人账号（PAN）号码验证器。首先，我们会将输入值与正则表达式模式进行匹配。如果匹配成功，则使用JavaScript在

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

标签上添加另一种样式。

HTML

<!DOCTYPE html>
<html lang="en">
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        How can the style/class of
        an element be changed?
    </h2>
 
    <b>Validate Pan Number</b>
 
    <input type="text" id="pan" />
    <p></p>
    <button id="submit">Validate</button>
 
    <script>
        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";
            }
        });
    </script>
</body>
 
</html>

输出：

JavaScript 如何更改元素的样式/类别

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

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

语法：

document.getElementById("id").classList

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

add() 方法： 添加一个或多个类。
remove() 方法： 删除一个或多个类。
toggle() 方法： 如果类不存在，则添加类并返回 true。如果存在类，则删除类并返回 false。第二个布尔参数强制添加或删除类。
示例： 在此示例中，我们使用上述方法。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        .hide {
            display: none;
        }
 
        .blueColor {
            color: blue;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
     
    <h2>
        How can the style/class of
        an element be changed?
    </h2>
     
    <h3>Hide and Show the Para</h3>
     
    <p>
        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.
    </p>
     
    <button id="hide">Hide</button>
    <button id="show">Show</button>
    <button id="color">Change Color</button>
 
    <script>
        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");
        });
    </script>
</body>
 
</html>

输出：

JavaScript 如何更改元素的样式/类别

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

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

语法：

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

示例： 在这个示例中，我们使用 className 属性来改变元素的颜色。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        .colorBlue {
            color: blue;
        }
 
        .colorRed {
            color: red;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
     
    <h2>
        How can the style/class of 
        an element be changed?
    </h2>
     
    <h3>className Example</h3>
     
    <p class="colorBlue">
        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.
    </p>
     
    <button id="submit">Change Color</button>
 
    <script>
        const btn = document.getElementById("submit");
        const para = document.querySelector("p");
 
        btn.addEventListener("click", function () {
            para.className = "colorRed";
        });
    </script>
</body>
 
</html>