如何使用 jQuery 在元素上应用样式？

在本文中，我们将学习如何使用 jQuery 在元素上应用样式。假设您正在构建一个需要交互用户界面的网站或游戏。在这种情况下，样式可以发挥重要作用，在这篇文章中，我们将学习如何在 JQuery 的帮助下触发某些事件时更改样式。我们可以使用JQuery CSS Classes或JQuery .css() 方法在元素上应用样式。

方法 1：使用 JQuery CSS 类。这种方法包括使用addClass() 方法、 removeClass() 方法和toggleClass() 方法等方法。这些方法的工作方式类似于classList.addClass() 方法和classList.removeClass() 方法。我们可以使用一些 css 规则创建一些类，并根据需要使用 JQuery 添加或删除它们。

句法：

$("#poll").removeClass("safe").addClass("danger");
// OR
$("#poll").toggleClass("danger");

例子：

HTML

  

    
    
    
        #poll {
            position: absolute;
            bottom: 15%;
        }
  
        #submit {
            position: absolute;
            bottom: 10%;
        }
  
        .safe {
            background-color: rgb(6, 161, 6);
            width: 20%;
            height: 30%;
        }
  
        .danger {
            background-color: rgb(226, 19, 19);
            width: 20%;
            height: 60%;
        }
    

  

    GeeksforGeeks
    How can you apply a style on an 
        element using jQuery?
    
    Alarm
    
        $("#submit").click(function () {
            // We can either remove the old
            // class and add a new one
            // $("#poll").removeClass("safe").addClass("danger");
  
            // Otherwise, we can toggle the class
            $("#poll").toggleClass("danger");
        })
    

  

输出：

在上面的例子中，我们为不同的状态维护了两个不同的类安全和危险。最初，安全类附加到 id 为 #poll 的 div，单击按钮后，该安全类被删除，并且动态添加危险类，这增加了 div 的高度并将其背景颜色更改为红色。

如果您对要删除哪个类以及要添加哪个类感到困惑，那么 toggleClass(“className”) 方法适合您。如果当前未添加，则此方法将类（作为方法内的参数传递）添加到 HTML 标记，如果当前添加到 HTML 标记，则从元素中删除该类。简而言之，此方法在从选定元素添加/删除类之间切换。

方法 2：使用 JQuery css() 方法：在此方法中，您可以直接从 javascript 本身设置样式，而不是在样式表中创建单独的类。 css() 方法可用于基于给定属性返回单个属性或设置单个或多个 CSS 属性。

句法：

// Assigning a single CSS property
$("#phone").css("background", "red");

// Assigning multiple properties
$("#phone").css({"background": "red", "font-size": "16px"});

示例 2：

HTML

  

    
    

  

    GeeksforGeeks
    How can you apply a style on an
        element using jQuery?
    Telephone Number Verification
    
    
    
    Check
  
    
        $("#submit").click(function () {
  
            // Regular expression to check 
            // for an indian phone number
            const regexExp = /^[6-9]\d{9}$/gi;
            const phone = $("#phone").val();
  
            // Add or remove classes based on
            // the regular expression check
            if (!regexExp.test(phone)) {
                $("#warning").text("It's wrong try again!");
                $("#warning").css("color", "red");
                $("#phone").css("background", "red");
            } else {
                $("#warning").text("It's correct");
                $("#warning").css("color", "green");
                $("#phone").css("background", "green");
            }
        });
    

  

输出：我们检查了输入的印度电话号码是否正确，我们根据自定义正则表达式模式检查输入值是否为假，然后使用 JQuery CSS 方法更改输入 Textarea 的背景颜色并显示警告。