本节我们学习如何通过 jQuery 对 CSS 元素进行操作。
jQuery 有以下四种操作 CSS 的方法：
| 方法 | 描述 |
|---|---|
| addClass() | 向指定元素中添加一个或多个 CSS 类 |
| removeClass() | 从指定元素中删除一个或多个 CSS 类 |
| toggleClass() | 对指定元素进行添加或删除 CSS 类的切换操作 |
| css() | 设置或返回样式属性 |
addClass()方法
addClass() 方法用于向指定元素添加一个或多个 CSS 类，我们在添加类时，可以选择多个元素。
如果要添加多个 CSS 类到指定元素，可以使用空格分隔类名。注意该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
示例：
例如我们实现点击按钮，改变文本的字体大小和颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p").addClass("con");
});
});
</script>
<style>
.con{
color: indianred;
font-size: 24px;
}
</style>
</head>
<body>
<p>你好，欢迎来到侠课岛！</p>
<button>添加CSS类</button>
</body>
</html>
在浏览器中的演示效果：
removeClass()方法
removeClass() 方法刚好和 addClass() 方法相反，addClass() 是原先没有样式，我们需要给它添加样式。而 removeClass() 是在原有的样式基础上移除 CSS 样式。
示例：
例如将上述示例稍做修改：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p").removeClass("con");
});
});
</script>
<style>
.con{
color: indianred;
font-size: 24px;
}
</style>
</head>
<body>
<p class="con">你好，欢迎来到侠课岛！</p>
<button>移除CSS类</button>
</body>
</html>
在浏览器中的演示效果：
toggleClass()方法
toggleClass() 方法用于对指定元素进行添加或删除 CSS 类的切换操作，其实就相当于在 addClass() 和removeClass() 两个方法之间进行切换。
示例：
在添加 con 样式和移除 con 样式之间切换：
$(function(){
$("button").click(function(){
$("p").toggleClass("con");
});
});
在浏览器中的演示效果：
css()方法
css() 方法为指定元素设置或返回一个或多个样式或属性。
语法如下：
css("propertyname","value");
示例：
返回指定元素的样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var c = $("p").css("color");
alert(c);
});
});
</script>
</head>
<body>
<p style="color:indianred;">你好，欢迎来到侠课岛！</p>
<button>获取CSS样式</button>
</body>
</html>
在浏览器中的演示效果：
如果需要给指定的元素设置 CSS 属性，我们可以像下面这样做：
$(function(){
$("button").click(function(){
$("p").css("color", "indianred");
});
});
在上述代码中， css() 方法内 color 为 CSS 样式属性，而 indianred 为样式属性值。
我们也可以给指定元素同时设置多个 CSS 属性，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p").css({"color":"white", "background-color":"indianred"});
});
});
</script>
</head>
<body>
<p>你好，欢迎来到侠课岛！</p>
<button>设置多个CSS属性</button>
</body>
</html>
将要设置的 CSS 属性放入一个花括号 {} 中，然后属性和属性值使用冒号 : 分隔，属性与属性之间使用逗号分隔。
在浏览器中的演示效果：
网友评论