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

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 >

输出如下：
在点击按钮之前-

文章图片
点击按钮后,

文章图片
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 >

输出如下：
在点击按钮之前-