一、返回css属性
语法：css("propertyname");
可以获取css的某个属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../jquery-3.6.0.js"></script> <title>css方法</title> </head> <body> <p style="background-color: blue;">这是一个p标签</p> <button>点击弹出<b>css属性</b></button> <script> $(document).ready(function(){ $('button').click(function(){ alert($('p').css('background-color')); }) }) </script> </body> </html>
效果如下：
这样写只可以获取第一个背景属性。
如何获取多个p标签的背景属性？
第一种：加上:nth-child(位置)即可。
alert($("p:nth-child(2)").css("background-color")); alert($("p:nth-child(3)").css("background-color"));
第二种方法：
eq() : 返回被选元素中带有指定索引号的元素（此方法会在过滤一章节） $("p").eq(N) // N 是索引号，从 0 开始
第三种方法：
可以使用for循环显示
for (var i = 0; i < 3; i++) { alert($('p').eq(i).css('background-color')); }
二、设置css属性
语法：css("propertyname","value");
<body> <p style="background-color: blue;">这是一个p标签</p> <p style="background-color: red;">这是一个p标签</p> <p style="background-color: yellow;">这是一个p标签</p> <button>点击弹出<b>css属性</b></button> <script src="../jquery-3.6.0.js"></script> <script> $(document).ready(function(){ $('button').click(function(){ $('p').css('background-color','gray'); //设置属性 背景色为灰色 $('p').css('color','white'); //文字为白色 }) }) </script> </body>
效果如图：
三、设置多个属性
上方方法可也以设置多个属性，但是代码量较多，可以简写成以下写法
语法：css({"propertyname":"value","propertyname":"value",...});
$(document).ready(function () { $('button').click(function () { $("p").css({ "background-color": "gray", "font-size": "200%", "color": "white" }); }); });
效果如下图：
