本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、返回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" });
});
});
效果如下图：
\
