jQuery 获取并设置 CSS 类 —— W3school 详解 简单易懂
在jQuery中,可以使用.addClass()
、.removeClass()
和.toggleClass()
方法来操作元素的CSS类。
.addClass(className)
:添加一个或多个类名到每个匹配元素。.removeClass(className)
:从每个匹配的元素中移除一个或多个类名。.toggleClass(className)
:如果存在(不存在)就移除(添加)一个类名。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3School Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").addClass("important");
});
$("#btn2").click(function(){
$("#div1").removeClass("important");
});
$("#btn3").click(function(){
$("#div1").toggleClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
color: red;
}
</style>
</head>
<body>
<div id="div1" onclick="alert('Hello World!')">Click on this text!</div>
<button id="btn1">Add Class</button>
<button id="btn2">Remove Class</button>
<button id="btn3">Toggle Class</button>
</body>
</html>
在这个例子中,当用户点击按钮时,对应的操作会被执行,改变div
元素的CSS类。
评论已关闭