jQuery操作元素对象的样式

最新推荐文章于 2022-10-29 00:50:26 发布

有园人

最新推荐文章于 2022-10-29 00:50:26 发布

阅读量129

点赞数

分类专栏：网页编程和设计文章标签： jQuery操作元素对象的样式

本文链接：https://blog.csdn.net/qq_42031653/article/details/99696853

版权

网页编程和设计专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在jQuery中操作元素为了加快速度，或者书写速度，可以用到json的格式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>08jQuery操作元素对象的样式A</title>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				border: 3px solid chartreuse;
			}
		</style>
		<script>
		$(function(){
			//获取div
			var div=$("#div1");
			$("#show").click(function(){
				
				alert(div.css("width")+"<--->"+div.css("height")+"<--->"+div.css("border")+"<--->"+div.css("background-color"));
			})
			
			$("#caozuo").click(function(){
				
				//操作单一属性
				div.css("width","300px");
				
				//json集体操作  {key1:value1,key2:value2}
				div.css({
					'height':'300px',
					'background-color':'red',
					'border':'5px solid chartreuse'
				})
			})
			
		})
			
		</script>
		
	</head>
	<body>
		<div id="div1">
			
		</div>
		<hr />
		<p>
			<input type="button" id="show" value="显示div样式" />
		</p>
		
		<p>
			<input type="button" id="caozuo" value="更改div样式" />
		</p>
	</body>
</html>

添加样式有俩种方法。第一种：

$("#div1").attr("class","div1");

第二种是通过addclass直接添加，但是只能通过class去添加：

$("#div1").addClass("div1");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
		<style>
			#div1{
				width: 500px;
				height: 500px;
				border: 3px solid chartreuse;
			}
			.div1{
				background-image: url(img/f0ac09301e73d6d6.jpg);
				background-position: center;
				background-repeat: no-repeat;
				background-color: aqua;
			}
		</style>
		<script>
			
			$(function(){
				$("#add").click(function(){
					//第一种通过class添加样式(也可以通过其他的方式添加样式，不一定非要是class。)
					$("#div1").attr("class","div1");
					
					//第二种通过class添加样式(只能通过class去添加样式)
					$("#div1").addClass("div1");
				})
			})
		</script>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<hr />
		<input type="button" id="add" value="通过class添加div属性"/>
	</body>
</html>

有园人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作元素对象的样式

在jQuery中操作元素为了加快速度，或者书写速度，可以用到json的格式：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>08jQuery操作元素对象的样式A</title> <script type="text/javascr...
复制链接

扫一扫

专栏目录