jQuery addClass，removeClass，class属性增删

最新推荐文章于 2024-11-10 20:14:44 发布

王家五哥

最新推荐文章于 2024-11-10 20:14:44 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_36521848/article/details/106245873

jQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用jQuery的addClass和removeClass方法为HTML元素动态添加和删除样式类，通过示例代码展示了如何实现这一功能，适用于网页设计中需要动态改变元素样式的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图，添加、移除class属性

上代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.myclass {
				background-color: red;
			}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function add() {
				$("#mydiv").addClass("myclass");
			}

			function remo() {
				$("#mydiv").removeClass("myclass");
			}
		</script>
	</head>

	<body>
		<pre>
			addClass、removeClass给元素添加class属性
		</pre>
		<div id="mydiv" style="border: solid;width: 200px;height: 200px;">
		</div>
		<input type="button" value="addClass" onclick="add()" />
		<input type="button" value="remoClass" onclick="remo()" />
	</body>

</html>