Nearth===>WEB前端--第19课/JQuery/操作类样式1（增加/删除）

最新推荐文章于 2019-11-16 17:30:09 发布

码字界陈冠希

最新推荐文章于 2019-11-16 17:30:09 发布

阅读量110

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/102991057

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				background-color:red;
			}
			.cls1{
				background-color: green;
			}
			.cls2{
				border:3px solid yellow;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					/* $("#dv").addClass("cls1 cls2"); */ //添加两个类样式
					/* $("#dv").addClass("cls1"); */  //添加一个类样式
					$("#dv").addClass("cls1").addClass("cls2");//链式编程添加两个类样式
				});
				$("#btn2").click(function(){
					$("#dv").removeClass("cls1");//移除一个元素的类样式
					/* $("#dv").removeClass();//移除div 中的所有类样式 方法中什么也不写移除的是当前元素所有的类样式 */
				});
			})
		</script>
	</head>
	<body>
	<h1>操作类样式1</h1>
	<input type="button" name="" id="btn1" value="显示效果" />
	<input type="button" name="" id="btn2" value="移除类样式" />
	<div id="dv">
		
	</div>
	</body>
</html>

运行结果：