其他分享
首页 > 其他分享> > 015-jQuery HTML-获取并设置CSS类

015-jQuery HTML-获取并设置CSS类

作者:互联网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			.important
			{
				font-weight:bold;
				font-size:xx-large;
			}
			.blue
			{
				color:blue;
			}
			.normal
			{
				font-weight: bold;
				font-size: x-large;
			}
			.red
			{
				color: red;
			}
		</style>
		<script>
			$(document).ready(function(){
				$("#btn1").click(function(){
					$("h1,h2,p").addClass("blue");
					$("div").addClass("important");
				});
				$("#btn2").click(function(){
					$("h1,h2,p").removeClass("red");
				});
				$("#btn3").click(function(){
					$("h1,h2,p").toggleClass("blue");
				});
			});
		</script>
	</head>
	<!--
		jQuery-获取并设置CSS类
			通过jQuery,可以容易地对CSS元素进行操作
		jQuery操作CSS
			jQuery拥有若干进行CSS操作的方法.我们将学习下面这些:
			-addClass()-向被选元素添加一个或多个类
			-removeClass()-从被选元素删除一个或多个元素
			-toggleClass()-对被选元素进行添加/删除类的切换操作
			-css()-设置或返回样式属性
		实例样式表
			下面的样式表将用于本页的所有例子
			.imortant
			{
				font-weight:bold;
				font-size:22-large;
			}
			.blue
			{
				color:blue;
			}
		jQuery addClass()方法
			下面的例子展示如何向不同的元素添加class属性.
			当然在添加类时,您可以选取多个元素
			$("#btn1").click(function(){
				$("h1,h2,p").addClass("blue");
				$("div").addClass("important");
			});
		jQuery removeClass()方法
			下面的例子演示如何在不同的元素中时删除指定的class属性
			$("#btn2").click(function(){
					$("h1,h2,p").removeClass("red");
				});
			});
		jQuery toggleClass()方法
			下面的例子将展示如何使用jQuery toggleClass()方法,该方法对被选元素进行添加/删除类的切换操作
			$("#btn3").click(function(){
				$("h1,h2,p").toggleClass("blue");
			});
		
	-->		
	<body>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<p>这是一个段落</p>
		<p>这是另外一个段落</p>
		<div>这是一些重要的文本!</div>
		<br>
		<button id="btn1">为元素添加class</button>
		<h1 class="red">标题1</h1>
		<h2 class="red">标题2</h2>
		<p class="red">这是一个段落.</p>
		<p class="normal">这是另外一个元素</p>
		<br>
		<button id="btn2">从元素中移除class</button>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<p>这是一个段落</p>
		<p>这是另外一个段落</p>
		<br>
		<button id="btn3">切换class</button>
	</body>
</html>

标签:jQuery,blue,function,h1,h2,HTML,015,font,click
来源: https://blog.csdn.net/weixin_43404791/article/details/122685465