样式操作,指的是使用 jQuery 来操作一个元素的 CSS 属性。
在 jQuery 中,对于样式操作共有以下 3 种:
在 jQuery 中,CSS 属性的操作有两种情况:一种是“获取属性”,另一种是“设置属性”。
在 jQuery 中,我们可以使用 css() 方法来获取某一个元素的 CSS 属性的取值。
语法:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{font-weight:bold;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn").click(function(){
var result = $("p").css("font-weight");
alert("font-weight取值为:" + result);
});
})
</script>
</head>
<body>
<p>城东书院</p>
<input id="btn" type="button" value="获取" />
</body>
</html>
预览效果如图 1 所示。
$("p").css("font-weight")表示获取 p 元素的 font-weight 属性值。我们点击【获取】按钮后,浏览器会弹出对话框,如图 2 所示。
在 jQuery 中,设置某一个元素的 CSS 属性的值,我们用的也是 css() 方法。不过对于 css() 方法,我们需要分两种情况来考虑:一种是“设置一个属性”,另一种是“设置多个属性”。
语法:
//设置多个属性$().css({"属性1":"取值1", "属性2":"取值2", ..., "属性n":"取值n"})
当我们想要设置多个 CSS 属性时,使用的是对象的形式。其中属性与取值采用的是“键值对”方式,每个“键值对”之间用英文逗号隔开。
举例:设置一个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function (){
$("#btn").click(function(){
$("li:nth-child(odd)").css("color","red");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="设置" />
</body>
</html>
默认情况下,预览效果如图 3 所示。
我们点击【设置】按钮后,预览效果如图 4 所示。
$("li:nth-child(odd)").css("color","red")这句代码使用了“子元素”伪类选择器,表示选取 ul 元素下所有序号为“奇数”(序号从 1 开始)li 元素,然后设置 color 属性值为 red。
实际上,下面两句代码是等价的。
$().css("color","red")
$().css({"color": "red"})
举例:设置多个 CSS 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function (){
$("#btn").click(function(){
$("li:nth-child(odd)").css({"color":"red", "background-color":"silver", "font-weight":"bold"});
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="设置" />
</body>
</html>
默认情况下,预览效果如图 5 所示。
我们点击【设置】按钮后,预览效果如图 6 所示。
分析:
$()css({"color":"red", "background-color":"silver", "font-weight":"bold"});
上面这句代码其实可以等价于:
$().css("color", "red);
$().css("background-color", "silver");
$().css("font-weight", "bold");