[网页编程]-06 jQuery 操作页面样式

prtyaa 2023-12-27 15:56:31  51021

分类专栏：资讯

本篇介绍通过jq对象的css（）可以操作元素的样式。

只写样式名如div.css("width");则是获取div的宽。
div.css("backgroundColor","red");则表示将div的背景颜色设置为红色。
设置多个样式可以将对应的样式和样式值封装为-json。

1.获取对象操作

$("#bu1").click(function(){
			//获得div对象
			var div =$("#div1");
		})

2.获取对象CSS操作

$("#bu1").click(function(){
			//获得div对象
			var div =$("#div1");
			//获得CSS样式
			var wid = div.css("width");
			var hi = div.css("height");
			console.log(wid+"==="+hi);
			
		
		})

3.操作对象CSS属性操作

$("#bu1").click(function(){
			//获得div对象
			var div =$("#div1");
			//获得CSS样式
			var wid = div.css("width");
			var hi = div.css("height");
			console.log(wid+"==="+hi);
			
			//操作元素对象的CSS
		/* 	div.css("width","400px");
			div.css("height","400px")
			div.css("background-color","red"); */
			//div.css("backgroundColor","red");
			
			//上方内容综合一下 --JESON格式 {key1:value1,key2:value2}
			div.css({'width':'300px',
				'height':'300px',
				'background-color':'red'});
			})
		})

整体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
		
		$("#bu1").click(function(){
			//获得div对象
			var div =$("#div1");
			//获得CSS样式
			var wid = div.css("width");
			var hi = div.css("height");
			console.log(wid+"==="+hi);
			
			//操作元素对象的CSS
		/* 	div.css("width","400px");
			div.css("height","400px")
			div.css("background-color","red"); */
			//div.css("backgroundColor","red");
			
			//上方内容综合一下 --JESON格式 {key1:value1,key2:value2}
			div.css({'width':'300px',
				'height':'300px',
				'background-color':'red'});
			})
		})
			
		</script>
	</head>
	<body>
		<input type="button" name=""  value="添加样式" id="bu1" />
		<hr>
		<div id="div1">
			
		</div>
	</body>
</html>

当页面中的css样式比较多的时候可以通过添加类的方式添加样式，两种方式皆可:

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

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

核心代码

$(function(){
   $("#but1").click(function(){
	//获得div对象 ---通过添加类的方式添加CSS样式操作对象
	//	$("#div1").attr("class","div");
	$("#div1").addClass("div")//同上 遵循选择器优先级
					
	   })
	})

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			.div{
				width: 500px;
								
				height: 500px;
				
				background-image: url(img/1.png);
				
				background-repeat: no-repeat;//背景不重复
				
				background-position: center;
				
				background-color: greenyellow;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					//获得div对象 ---通过添加类的方式添加CSS样式操作对象
				//	$("#div1").attr("class","div");
				$("#div1").addClass("div")//同上 遵循选择器优先级
					
				})
			})
		</script>
	</head>
	<body>
		<input type="button" name="" id="but1" value="元素样式操作" />
		<hr>
		<div id="div1">
			
		</div>
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31515

赞同 0

评论 0 条

[网页编程]-06 jQuery 操作页面样式

本篇介绍通过jq对象的css（）可以操作元素的样式。

1.获取对象操作

2.获取对象CSS操作

3.操作对象CSS属性操作

当页面中的css样式比较多的时候可以通过添加类的方式添加样式，两种方式皆可:

相关文章

关注我们