如何使用 jQuery 向元素添加和删除 CSS 类？

在本文中，我们将了解如何使用 jQuery 向元素添加或删除 CSS 类。要将 CSS 类添加到元素，我们使用 addClass() 方法，而要删除 CSS 类，我们使用 removeClass() 方法。

句法：

• 将 CSS 类添加到元素的语法：

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

• 删除 CSS 类到元素的语法：

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

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

HTML

  

    
    
    
  
    
    
    
  
    
        button {
            padding: 5px 15px;
            background-color: green;
            color: white;
        }
  
        .bg-black {
            background-color: black;
        }
    

  

    
        GeeksforGeeks
    
  
    
        How to add and remove CSS classes
        to an element using jQuery?
    
  
    
        
    
  
    
    
        Add CSS Class
    
    
        Remove CSS Class
    
  
    
        $(document).ready(function () {
            $("#addCls").click(function () {
                $("img").addClass("bg-black");
            });
            $("#removeCls").click(function () {
                $("img").removeClass("bg-black");
            });
        });
    

  

输出：