015_获取并设置CSS类

最新推荐文章于 2023-10-07 17:57:22 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-10-07 17:57:22 发布

阅读量176

点赞数

分类专栏： jQuery学习文章标签： css jquery javascript

本文链接：https://blog.csdn.net/aihiao/article/details/112342278

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. hasClass()方法

1.1. hasClass()方法检查被选元素是否包含指定的class。返回true包含指定的class, 反之不包含。

1.2. 语法

$(selector).hasClass(class)

1.3. 参数

1.4. 如果判断多个类是否存在, 请使用空格分隔类名。只有多个类都存在才返回true, 反之返回false。

2. addClass()方法

2.1. addClass()方法向被选元素添加一个或多个类。

2.2. 该方法不会移除已存在的类, 仅仅添加一个或多个类。如果class属性不存在, 也可以直接添加类, 会自动添加class属性。

2.3. 如果要添加的类已经存在, 不会有任何作用, 可以先用hasClass()方法判断一下, 事实上不判断也行, 感觉hasClass()在这里失去了意义。

2.4. 如需添加多个类, 请使用空格分隔类名。

2.5. 语法

$(selector).addClass(class)

2.6. 参数

2.7. 使用函数来添加类

2.7.1. 使用函数向被选元素添加类。

2.7.2. 语法

$(selector).addClass(function(index,oldclass))

2.7.3. 参数

2.8. 例子

2.8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>addClass添加一个或多个类</title>
		
		<style type="text/css">
			.background {
				background-color: red;
				width: 600px;
				height: 300px;
			}

			.font {
				font-size: 24px;
				font-weight: bold;
			}

			.margin {
				margin-left: 30px;
				margin-top: 20px;
			}

			.border {
				border-style: solid;
				border-width: 3px;
			}
		</style>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					if(!$("#p1").hasClass('background')) {
						$("#p1").addClass('background');
					}
				});
				$('#btn2').click(function(){
					$("#p1").addClass('font margin');
				});
				$('#btn3').click(function(){
					if(!$("#p1").hasClass('border')){
						$("#p1").addClass(function(index, oldclass){
							return 'border';
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">addClass()方法向被选元素添加一个或多个类。</p>
		<button id="btn1">添加一个类</button> <button id="btn2">添加多个类</button> <button id="btn3">使用函数来添加类</button>
	</body>
</html>

2.8.2. 效果图

3. removeClass()方法

3.1. removeClass()方法从被选元素移除一个或多个类。

3.2. 如果没有规定参数，则该方法将从被选元素中删除所有类。

3.3. 如果要移除的类没有不存在, 不会有任何作用。

3.4. 如需移除多个类, 请使用空格分隔类名。

3.5. 语法

$(selector).removeClass(class)

3.6. 参数

3.7. 使用函数来移除类

3.7.1. 使用函数来删除被选元素中的类。

3.7.2. 语法

$(selector).removeClass(function(index,oldclass))

3.7.3. 参数

3.8. 例子

3.8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>removeClass移除一个或多个类</title>
		
		<style type="text/css">
			.background {
				background-color: red;
				width: 600px;
				height: 300px;
			}

			.font {
				font-size: 24px;
				font-weight: bold;
			}

			.margin {
				margin-left: 30px;
				margin-top: 20px;
			}

			.border {
				border-style: solid;
				border-width: 3px;
			}
		</style>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("#p1").removeClass('background');
				});
				$('#btn2').click(function(){
					$("#p1").removeClass('font margin');
				});
				$('#btn3').click(function(){
					$("#p1").removeClass(function(index, oldclass){
						return 'border';
					});
				});
				$('#btn4').click(function(){
					$("#p1").removeClass();
				});
			});
		</script>
	</head>
	<body>
		<p id="p1" class="background font margin border">removeClass()方法从被选元素移除一个或多个类。</p>
		<button id="btn1">移除一个类</button> <button id="btn2">移除多个类</button> 
		<button id="btn3">使用函数来移除类</button> <button id="btn4">清除所有类</button>
	</body>
</html>

3.8.2. 效果图

4. toggleClass()方法

4.1. toggleClass()方法对设置或移除被选元素的一个或多个类进行切换。

4.2. 该方法检查每个元素中指定的类。如果不存在则添加类, 如果已设置则删除之。这就是所谓的切换效果。

4.3. 如果需要设置或移除多个类, 请使用空格分隔类名。

4.4. 不过, 通过使用"switch"参数, 您能够规定只删除或只添加类。true是添加, false是移除。

4.5. 语法

$(selector).toggleClass(class,switch)

4.6. 参数

4.7. 使用函数来切换类

4.7.1. 使用函数来设置或移除被选元素的一个或多个类进行切换。

4.7.2. 语法

$(selector).toggleClass(function(index,class),switch)

4.7.3. 参数

4.8. 例子

4.8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>toggleClass设置或移除一个或多个类</title>
		
		<style type="text/css">
			.background {
				background-color: red;
				width: 600px;
				height: 300px;
			}

			.font {
				font-size: 24px;
				font-weight: bold;
			}

			.margin {
				margin-left: 30px;
				margin-top: 20px;
			}

			.border {
				border-style: solid;
				border-width: 3px;
			}
		</style>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("#p1").toggleClass('background');
				});
				$('#btn2').click(function(){
					$("#p1").toggleClass('font margin');
				});
				$('#btn3').click(function(){
					$("#p1").toggleClass(function(index, oldclass){
						return 'border';
					});
				});
				$('#btn4').click(function(){
					$("#p1").toggleClass('background', true);
				});
				$('#btn5').click(function(){
					$("#p1").toggleClass('background', false);
				});
			});
		</script>
	</head>
	<body>
		<p id="p1" class="background font margin border">toggleClass()方法对设置或移除被选元素的一个或多个类进行切换。</p>
		<button id="btn1">设置或移除一个类</button> <button id="btn2">设置或移除多个类</button> 
		<button id="btn3">使用函数来设置或移除类</button> <button id="btn4">添加一个类</button> <button id="btn5">移除一个类</button>
	</body>
</html>

4.8.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
015_获取并设置CSS类

1. hasClass()方法1.1. hasClass()方法检查被选元素是否包含指定的class。返回true包含指定的class, 反之不包含。1.2. 语法$(selector).hasClass(class)1.3. 参数1.4. 如果判断多个类是否存在, 请使用空格分隔类名。只有多个类都存在才返回true, 反之返回false。2. addClass()方法2.1. addClass()方法向被选元素添加一个或多个类。2.2. 该方法不会移除已存在的类, 仅
复制链接

扫一扫