jQuery学习09---样式操作，addClass,removeClass,toggleClass

最新推荐文章于 2021-03-01 18:41:54 发布

原创最新推荐文章于 2021-03-01 18:41:54 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#样式操作 #addClass #removeClass #toggleClass

jQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用jQuery简化网页元素样式的切换方法，并通过具体实例展示了如何实现元素样式的点击切换及页面背景的动态变化。此外还涉及了基本的CSS样式定义，包括类选择器的使用。

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

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<link rel="stylesheet" type="text/css" href="table.css">
		<title></title>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<style type="text/css">
			.my
			{
				width:200px;
				height:200px;
			}
			.m
			{
				border:1px solid red;
			}
			.dark
			{
				background-color:black;
				//filter:gray
			}
		</style>
		<script type="text/javascript">
		/*
			点击每一行时高亮显示的实现主要是在点击的时候当前行添加样式，同时兄弟结节移除该样式
			文本框聚焦时也类似，focus时添加，blur时移除
		*/
			$(function()
			{
				$("#btn").click(function()
				{
					//会把原来的样式给覆盖掉
					//$(".my").attr("class","m");
					//以下方法可以实现，但麻烦，
					//var my = $(".my").attr("class");
					//$(".my").attr("class",my+" m");//不要丢掉空格
					//追加样式更常用
					//$(".my").addClass("m");
					//移除样式
					$(".my").removeClass("my");
					//hasClass()判断是否有某个样式
				});
				//切换样式的实现
				$("#toggle").click(function()
				{
					$("body").toggleClass("dark");
				});
			});
		</script>
	</head>
	<body>
		<div class="my">aaaa</div>
		<input id="btn" type="button" value="click"/>
		<input id="toggle" type="button" value="切换">
	</body>
</html>