<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//样式操作,设置多个属性
//$().css({"属性1":"取值1","属性2":"取值2",......});
$("#btn1").click(function () {
//属性名方式一,使用css属性名,引号中为css属性名书写
$("li:nth-child(even)").css({
"color":"blue",
"background-color":"silver",
"font-weight":"bold"
});
//属性名方式二,使用JavaScript属性名,没有引号,去除连接短横杠,单词首字母大写
$("li:nth-child(odd)").css({
color:"white",
backgroundColor:"gray",
fontWeight:"bold"
});
});
});
/*
在jQuery中,设置一个元素的css属性值,有两种方式
一种是设置一个属性,另一种是设置多个属性
语法
$().css("属性","取值");
$().css({"属性1":"取值1","属性2":"取值2",......});
*/
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input type="button" id="btn1" value="设置">
</body>
</html>