jQuery设置样式类方法实例
时间: 2023-08-23 21:03:48 浏览: 41
可以使用 jQuery 的 `addClass()` 方法来添加一个或多个样式类到一个元素上,也可以使用 `removeClass()` 方法来移除一个或多个样式类,使用 `toggleClass()` 方法来切换一个或多个样式类的存在状态。
以下是一个示例代码,演示如何使用 `addClass()` 方法来设置样式类:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery 设置样式类</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<p>Hello World</p>
<button id="btnAddClass">添加样式类</button>
<button id="btnRemoveClass">移除样式类</button>
<button id="btnToggleClass">切换样式类</button>
<script>
$(document).ready(function() {
$("#btnAddClass").click(function() {
$("p").addClass("red bold");
});
$("#btnRemoveClass").click(function() {
$("p").removeClass("red bold");
});
$("#btnToggleClass").click(function() {
$("p").toggleClass("red bold");
});
});
</script>
</body>
</html>
```
在这个示例中,点击“添加样式类”按钮将会在 `<p>` 元素上添加 `red` 和 `bold` 两个样式类,点击“移除样式类”按钮将会移除这两个样式类,点击“切换样式类”按钮将会切换这两个样式类的存在状态。