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：

<!DOCTYPE html> 
  
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs 
                 /jquery/3.3.1/jquery.min.js"> 
          
        // this is the link of JQuery CDN direct from the 
        // jquery website so that we can use all the  
        //function of JQuery css() 
    </script> 
</head> 
  
<body> 
    <button>Click here and it will return the color value 
            of p element</button> 
    <p style="color:green">Wecome to gfg!</p> 
</body> 
<script> 
    $(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")); 
        }); 
    }); 
</script> 
  
</html>

输出：
在点击按钮之前-

点击按钮后，

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：

<!DOCTYPE html> 
  
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs 
                 /jquery/3.3.1/jquery.min.js"> 
                   
        // this is the link of JQuery CDN direct from 
        // the jquery website so that we can use all 
        // the function of JQuery css() 
    </script> 
</head> 
  
<body> 
    <button>Click here and it will return the color value 
            of p element</button> 
    <p style="border:2px solid green;color:red;padding:5px"> 
              Wecome to gfg!.</p> 
</body> 
<script> 
    $(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"); 
        }); 
    }); 
</script> 
  
</html>

输出：
在点击按钮之前-

点击按钮后，

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：

<!DOCTYPE html> 
  
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs 
                 /jquery/3.3.1/jquery.min.js"> 
                   
        //this is the link of JQuery CDN direct from 
        //the jquery website so that we can use all 
        //the function of JQuery css() 
    </script> 
</head> 
  
<body> 
    <button>Click here and the padding will change.</button> 
    <p style="border:2px solid green;color:green;padding=5px;"> 
              Welcome to gfg!.</p> 
</body> 
<script> 
    $(document).ready(function() { 
        $("button").click(function() { 
            $("p").css("padding", function(h) { 
                return h + 30; 
            }); 
        }); 
    }); 
</script> 
  
</html>

输出：
在点击按钮之前-

点击按钮后，

相关用法

注：本文由纯净天空筛选整理自kundankumarjha大神的英文原创作品 jQuery | css() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。