如何使用jQuery添加和删除CSS类到一个元素

在这篇文章中，我们将看到如何使用jQuery来添加或删除一个元素的CSS类。我们使用addClass()方法来添加CSS类到一个元素，使用removeClass()方法来删除CSS类。

语法:

为一个元素添加CSS类的语法。

$('selector').addClass(class_name);

移除一个元素的CSS类的语法。

$('selector').removeClass(class_name);

例子：在这个例子中，我们首先创建一个图像元素和两个按钮，第一个按钮用于添加CSS类，第二个按钮用于删除CSS类。当用户点击第一个按钮时，addClass()方法被调用，该类被添加到图像元素中。当用户点击第二个按钮时，removeClass()方法被调用，类被从图像元素中删除。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <!-- Including jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <style>
        button {
            padding: 5px 15px;
            background-color: green;
            color: white;
        }
  
        .bg-black {
            background-color: black;
        }
    </style>
</head>
  
<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <h3>
        How to add and remove CSS classes
        to an element using jQuery?
    </h3>
  
    <div id="GFG_IMAGE">
        <img src=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"
            height="200px" width="250px" />
    </div>
  
    <br />
    <button id="addCls">
        Add CSS Class
    </button>
    <button id="removeCls">
        Remove CSS Class
    </button>
  
    <script>
         $(document).ready(function () {$ ("#addCls").click(function () {
                 $("img").addClass("bg-black"); });$ ("#removeCls").click(function () {
                $("img").removeClass("bg-black");
            });
        });
    </script>
</body>
  
</html>

输出:

如何使用jQuery添加和删除CSS类到一个元素？