jQuery——41. 获取CSS样式和设置CSS样式【 CSS（）】

本文链接：https://blog.csdn.net/weixin_63215361/article/details/146291936

1.获取css样式,行内样式和外部样式都能获取

1.获取css样式,行内样式和外部样式都能获取
获取多个样式不论行内还是行外，用数组,返回一个对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			#box{width: 200px;height: 200px;border: 2px solid black;
				margin: 50px auto;text-align: center;
			}
			button{
				width: 200px;height: 50px;margin:0 auto;display: block;
			}
			.zxw{font-size: 30px;}
			.zxw1{color: red;}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//1.获取css样式,行内样式和外部样式都能获取
				$("button").click(function(){
					//获取一个外部样式
				    var a = $("#box p").css("fontWeight");
					var b = $("#box p").css("color");//获取外部样式
					var c = $("#box p").css("fontSize");//获取外部样式
					console.log(a);
					console.log(b);
					console.log(c);
										
					//获取多个样式不论行内还是行外，用数组,返回一个对象
					var d = $("#box p").css(["fontSize","color","fontWeight"]);
					console.log(d);

				});

			
			})
		</script>
	</head>
	<body>
		<div id="box">
			<p class="zxw zxw1" style="font-weight: 700;">我要自学网</p>
		</div>
		
		<button>点击</button>
	</body>
</html>

在这里插入图片描述
1.获取css样式,行内样式和外部样式都能获取
设置多个样式，要用对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			#box{width: 200px;height: 200px;border: 2px solid black;
				margin: 50px auto;text-align: center;
			}
			button{
				width: 200px;height: 50px;margin:0 auto;display: block;
			}
			.zxw{font-size: 30px;}
			.zxw1{color: red;}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//1.获取css样式,行内样式和外部样式都能获取
				$("button").click(function(){
				//设置一个样式
			    //$("#box p").css("color","blue");
					
					//设置多个样式，要用对象
					$("#box p").css({
						color:"blue",
						fontWeight:400,
						fontSize:"12px",
						backgroundColor:"#ccc"
					});	
			})
		})
		</script>
	</head>
	<body>
		<div id="box">
			<p class="zxw zxw1" style="font-weight: 700;">我要自学网</p>
		</div>
		
		<button>点击</button>
	</body>
</html>