jQuery操作元素的样式

最新推荐文章于 2022-05-17 10:53:03 发布

aqzengkuasheng

最新推荐文章于 2022-05-17 10:53:03 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/122991150

js 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery的css()方法来获取、设置、添加和移除元素的样式。示例中展示了如何改变div的背景颜色、字体大小以及添加和删除特定类，从而动态改变网页元素的显示效果。

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

样式的属性值获取、样式的属性值设置、添加样式、移除样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 div{
		    padding: 8px;
		    width: 180px;
		 }
		 .blue{
		 background: blue;
		 }
		 .larger{
		 font-size: 30px;
		 }
		 .green {
		 background : green;
		 }
		 .red{
			 background: red;
		 }
		 </style>
	</head>
	<body>
		<h3>css()方法设置元素样式</h3>
		 <div id="conBlue" class="red larger">天蓝色</div>
		     <div id="conRed">大红色</div>
		     <div id="remove" class="blue larger">天蓝色</div>
	</body>
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	//获取属性值
		var cla=$("#conBlue").attr("class");
		console.log(cla);
		
		//设置样式
		$("#conBlue").attr("class","green");
		//添加样式
		$("#conBlue").addClass("larger");
		
		//添加具体的样式
		$("#conRed").css("font-size","40px");
		$("#conRed").css({"font-family":"楷体","color":"green"});
		
		//移除样式
		$("#remove").removeClass("larger");
	</script>
</html>