jQuery | css() 方法

JQuery库支持几乎所有包含在级联样式表 (CSS) 中的选择器。 JQuery 中的css()方法用于更改所选元素的样式属性。 JQuery 中的css()可以以不同的方式使用。
css() 方法可用于检查所选元素的属性的当前值：

句法：

$(selector).css(property)

返回值：它将返回所选元素的属性值。

示例 1：

Input: $("p").css("color");
Output: Output of the above input will return the 
rgb() value of the element.

代码#1：

HTML

 

    
         
        // this is the link of JQuery CDN direct from the
        // jquery website so that we can use all the
        //function of JQuery css()
    

 

    Click here and it will return the color value
            of p element
    Wecome to gfg!
 


    $(document).ready(function() {
         
        //here selecting button element
        $("button").click(function() {
             
            // here when the button is clicked css() method
            // will return the value using alert method
            alert($("p").css("color"));
        });
    });

 

输出：
在点击按钮之前——

点击按钮后——

css() 方法还用于添加或更改所选元素的属性。

句法：

$(selector).css(property, value)

返回值：这将更改所选元素的属性值。

示例 2：

Input: $("p").css("color", "red");
Output: Output of the "p" element becomes red 
whatever may be the color previously.

代码#2：

HTML

 

    
                  
        // this is the link of JQuery CDN direct from
        // the jquery website so that we can use all
        // the function of JQuery css()
    

 

    Click here and it will return the color value
            of p element
    
              Wecome to gfg!.
 


    $(document).ready(function() {
         
        // here selecting button element
        $("button").click(function() {
             
            // here when the button is clicked css()
            // method will change the color of paragraph
            $("p").css("color", "green");
        });
    });

 

输出：
在点击按钮之前——

点击按钮后——

css() 方法可以使用函数来更改所选元素的 css 属性：

句法：

$(selector).css(property, function(index, currentvalue))

返回值：它将返回所选属性的更改值。

示例 3：

Input: $("p").css("padding", function(i){ return i+20;});
Output: Output will get is the paragraph with padding value
 increases to "25px" whatever be the initial value.

代码#3：

HTML

 

    
                  
        //this is the link of JQuery CDN direct from
        //the jquery website so that we can use all
        //the function of JQuery css()
    

 

    Click here and the padding will change.
    
              Welcome to gfg!.
 


    $(document).ready(function() {
        $("button").click(function() {
            $("p").css("padding", function(h) {
                return h + 30;
            });
        });
    });

 

输出：
在点击按钮之前——

点击按钮后——

在 css 方法的帮助下，我们还可以在 JQuery 中一次应用多个属性。

注意：在这个方法中，我们用驼峰命名法写入属性名称。

句法：

$(selector).css({property:value, property:value, ...})

代码#4：

HTML

  Document

 
 
    
            Welcome to gfg!.
 
  Apply css
  
   
  
    $("button").click(function(){
      //applying more than one property at a time
      //Note : property name written in camelCase
        $("p").css({"backgroundColor":"green",
                "color":"white","fontSize":"20px"});
    });
     

 

输出：

在点击按钮之前——

点击按钮后——