jQuery--样式操作（addClass()、removeClass()、toggleClass()、css()）详解

最新推荐文章于 2023-12-10 19:02:02 发布

吴声子夜歌

最新推荐文章于 2023-12-10 19:02:02 发布

阅读量2.9k

点赞数 6

分类专栏： jQuery 文章标签： jQuery addClass removeClass toggleClass css

本文链接：https://blog.csdn.net/cold___play/article/details/101867300

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

样式操作

在HTML代码中，通过class属性指定HTML标签的样式名；在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。

1. addClass()方法：
addClass()方法用于对一个或多个匹配元素追加样式，其语法格式如下：

addClass(className)
addClass(className1 className2 ... classNameN)
addClass(function(index, oldClassName))

className：表示需要追加的样式名
className1、className2,…,ClassNameN：表示可以同时追加多个样式，样式名之间使用空格隔开
参数function(index, oldClassName)：表示使用函数的返回值作为当前位置的样式，index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之间的样式名

示例：

//追加baseClass样式
$("p[title='desc']").addClass("baseClass");
//追加baseClass和fontColor样式
$("p[title='desc']").addClass("caseClass fontColor");

2. removeClass()方法：
removeClass()方法用于移除匹配元素的一个或多个样式，也可以一次性移除元素的所有样式，其语法格式如下：

removeClass()
removeClass(className)
removeClass(className className2 ... classNameN)

无参方法用于移除匹配元素的所有样式
className：表示需要删除的样式名
className1、className2,…,ClassNameN：表示可以同时移除多个样式，样式名之间使用空格隔开

示例：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>jQuery基本操作-样式操作</title>
		<script type="text/javascript" src="js/jquery-1.x.js">
		</script>
		<style type="text/css">
			.titleClass {
				font-size: 20px;
				font-weight: bold;
			}
			
			.baseClass {
				padding-left: 20px;
				background-color: #DDD;
			}
			
			.fontSize {
				font-size: 16px;
			}
			
			.fontColor {
				color: #363;
			}
			
			.p0 {
				color: red;
			}
			
			.p1 {
				color: blue;
			}
			
			.p2 {
				color: green;
			}
		</style>
	</head>

	<body>
		<p id="articleTitle">jQuery操作元素样式</p>
		<hr />
		<p title="desc">可以使用attr()方法操作元素的class属性，以获取或改变标签的样式。</p>
		<p title="desc">除此之外，jQuery还提供了addClass()、removeClass()和toggleClass()方法。</p>
		<p title="desc" id="lastContent">使用addClass()方法可以为一个或多个匹配的页面元素追加样式。</p>
		<input type="button" value="移除样式" onClick="removeClass()" />
		<script type="text/javascript">
			$(function(e) {
				$("#articleTitle").addClass("titleClass");
				$("p[title='desc']").addClass("baseClass fontColor");
				//根据位置添加不同的样式
				$("p[title='desc']").addClass(function(index, oldClass) {
					console.log(index + " " + oldClass);
					return 'p' + index;
				});
			});

			function removeClass() {
				$("p").removeClass("fontSize"); //移除指定的样式
				$("p").removeClass(); //移除所有的样式
			}
		</script>
	</body>

</html>

在这里插入图片描述
3. toggleClass()方法：
toggleClass()方法用于元素样式之间的重复切换，当元素指定样式存在时，将该样式移除，否则添加该样式。toggleClass()方法的语法格式如下：

toggleClass(className)
toggleClass(className, switch)

className：表示需要切换的样式名
switch：表示切换样式开关，默认为true，当switch为true时允许样式切换，否则不切换

示例：

//ID为userName的元素添加样式，如果存在focusClass样式则移除，没有则添加该样式
$("#userName").toggleClass("focusClass");
//第二个参数为真，样式切换为inverseColor
$("#saleDept").toggleClass("inverseColor", true);

4. css()方法：
在jQuery1.9+中新增了css()方法，用于返回第1个匹配元素的CSS样式，或设置所有匹配元素的样式。css()方法格式如下：

css(attrName)
css(key, value)
css(properties)
css(sttrName, function(index, oldValue))

attrname：表示要访问的属性名称
key、value：用于设置元素的某一样式，key表示属性名，value表示属性值
properties：用于设置元素的某些样式，为Map类型的键值对所构成的集合
参数function(index, oldClassName)：表示使用函数的返回值作为当前位置的样式，index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之间的样式名

示例：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>jQuery基本操作-样式操作</title>
		<script type="text/javascript" src="js/jquery-1.x.js">
		</script>
		<style type="text/css">
			.baseClass {
				background-color: #DDD;
			}
			
			.focusClass {
				background-color: #FFF;
				border: 2px dotted #FF0000;
			}
			
			.inverseColor {
				color: #FFF;
				background-color: #000;
			}
		</style>
	</head>

	<body>
		销售人员：<input type="text" value="请输入销售人员名称" id="userName" class="baseClass" onFocus="userNameOnFocus()" /><br/> 销售部门：
		<input type="text" value="请输入销售部门" id="saleDept" /><br/>
		<input type="button" value="更换销售部门样式(点击3次)" onClick="changeDept()" />
		<hr/>
		<img src="images/flower2.png" width="300px" /><br />
		<input type="button" value="放大图片" onClick="enlargeImage()" />
		<input type="button" value="缩小大图片" onClick="lessenImage()" />
		<script type="text/javascript">
			var count = 0;

			function userNameOnFocus() {
				$("#userName").toggleClass("focusClass");
			}

			function changeDept() {
				$("#saleDept").toggleClass("inverseColor", ++count % 3 == 0);
			}

			function enlargeImage() {
				//alert($("img").css("width"));
				$("img").css({
					width: function(index, value) {
						return parseFloat(value) * 1.1;
					},
					height: function(index, value) {
						return parseFloat(value) * 1.1;
					}
				});
			}

			function lessenImage() {
				$("img").css({
					width: function(index, value) {
						return parseFloat(value) * 0.9;
					},
					height: function(index, value) {
						return parseFloat(value) * 0.9;
					}
				});
			}
		</script>
	</body>

</html>