数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中使用 jQuery 操纵 CSS 类？
在本文中，我们将学习如何在 HTML 中使用 jQuery 来操纵 CSS 类。
使用 jQuery，可以轻松地操纵 HTML 元素的样式。我们有几个用于操纵 CSS 的 jQuery 方法。让我们逐一讨论它们，并提供适当的示例。
jQuery addClass() 方法
jQuery addClass() 方法用于向所选元素添加一个或多个类。
语法
以下为 jQuery addClass() 方法的语法 −
$(selector).addClass(classname);
“classname” 是必需的参数。它指定要添加的一个或多个类名。
示例
在以下示例中，我们使用 jQuery addClass() 方法向 HTML 元素添加 class 属性 −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3").addClass("newclass1");
$("p").addClass("newclass2");
});
});
</script>
<style>
.newclass1 {
font-size: xx-large;
}
.newclass2 {
font-weight: bold;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3>Tutorialspoint</h3>
<p>Simply Easy Learning at your fingertips.</p>
<button>Click to add classes to elements</button>
</body>
</html>
输出
在执行上述程序后，单击按钮时，标题和段落元素的样式会根据 CSS 中指定的属性进行操纵。
示例
在这里，我们通过用空格分隔类名在 jQuery addClass() 方法中指定多个类。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").addClass("newclass1 newclass2");
});
});
</script>
<style>
.newclass1 {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3>Tutorialspoint</h3>
<p>Simply Easy Learning at your fingertips.</p>
<button>Click to add classes to elements</button>
</body>
</html>
输出
执行上述程序并单击按钮查看更改。
jQuery removeClass() 方法
jQuery removeClass() 方法从选中的元素中移除一个或多个类。如果我们未为此方法指定任何参数，它将从选定的元素中移除所有类名。
语法
以下是 jQuery removeClass() 方法的语法 −
$(selector).removeClass(classname);
“classname”是必需的参数。它指定一个或多个要移除的类名。
示例
在以下示例中，我们正在从标题和段落元素中移除类属性 −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").removeClass("green");
});
});
</script>
<style>
.green {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3 class="green">Tutorialspoint</h3>
<p class="green">Simply Easy Learning at your fingertips.</p>
<button>Click to remove classes from elements</button>
</body>
</html>
输出
执行上述程序并单击按钮查看更改。
jQuery toggleClass() 方法
jQuery toggleClass() 方法在向选中的元素中添加和移除类之间切换。
语法
以下是 jQuery toggleClass() 方法的语法 −
$(selector).toggleClass(classname);
示例
在下面的示例中，我们正在尝试使用 jQuery toggleClass() 方法在向选中的元素中添加/移除类之间切换 −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").toggleClass("green");
});
});
</script>
<style>
.green {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3 class="green">Tutorialspoint</h3>
<p class="green">Simply Easy Learning at your fingertips.</p>
<button>Click to toggle classes</button>
</body>
</html>
输出
执行上述程序并单击按钮查看切换。
更新于： 2023 年 08 月 04 日
94 次浏览
广告