jQuery如何使用css()方法?代码示例

2021年3月20日16:47:17 发表评论 582 次浏览

jQuery查询库几乎支持层叠样式表(CSS)中包含的所有选择器。的css()方法中jQuery查询用于更改所选元素的样式属性。的css()在JQuery中可以以不同的方式使用。

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 >

输出如下:

在点击按钮之前-

jQuery | css()方法1

点击按钮后,

jQuery | css()方法2

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 >

输出如下:

在点击按钮之前-

jQuery | css()方法3

点击按钮后,

jQuery | css()方法4

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 >

输出如下:

在点击按钮之前-

jQuery | css()方法5

点击按钮后,

jQuery | css()方法6

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: