jQuery获取并设置CSS类

最新推荐文章于 2024-07-30 03:21:35 发布

AllenWalker1936

最新推荐文章于 2024-07-30 03:21:35 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery jQueryHTML

本文链接：https://blog.youkuaiyun.com/AllenWalker1936/article/details/89184832

jQuery 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQueryHTML

6 篇文章

订阅专栏

本文深入讲解了使用jQuery进行CSS类和属性操作的方法，包括addClass()、removeClass()、toggleClass()及css()函数的使用技巧，通过实例展示了如何动态修改网页元素的样式。

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

jQuery获取并设置CSS类和CSS属性

方法

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

设置CSS属性语法

1.css(“propertyname”); - 返回指定的CSS属性的值
2.css(“propertyname”,“value”); - 设置指定的CSS属性
3.css({“propertyname”:“value”,“propertyname”:“value”,…}); - 设置多个CSS属性

代码

<!doctype html>
	<head>
	<title>jq获取并设置CSS类</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#bt1").click(function(){
				$("#p1,#p2,#a1").addClass("blue");
				$("#b1").addClass("big blue");//一次添加多个类的语法
			});
			$("#bt2").click(function(){
				$("#p1,#p2,#a1").removeClass("blue");
				$("#b1").removeClass("big blue");//一次删除多个类的语法
			});
			$("#bt3").click(function(){
				$("#p1,#p2,#a1").toggleClass("blue");
				$("#b1").toggleClass("big blue");
			});
			$("#bt4").click(function(){
				alert("字体颜色为"+$("p").css("color"));
			});
			$("#bt5").click(function(){
				$("p,a,b").css("background-color","red");
			});
			$("#bt6").click(function(){
				$("p,a,b").css({"background-color":"red","font-size":"300%"});//一次设置多个CSS属性语法
			});
		});
	</script>
	<style type="text/css">
		.blue{
			color:blue;
		}
		.big{
			font-size:xx-large;
		}
	</style>
	</head>

	<body>
		<input type="button" value="添加类" id="bt1">
		<input type="button" value="删除类" id="bt2">
		<input type="button" value="切换" id="bt3">
		<input type="button" value="返回CSS属性" id="bt4">
		<input type="button" value="设置CSS属性" id="bt5">
		<input type="button" value="设置多个CSS属性" id="bt6">
		<p id="p1">hello world!</p>
		<p id="p2">hello world!</p>
		<b id="b1">hello world!</b><br>
		<a href="" id="a1">hello world!</a>
	</body>
</html>