jQuery获取设置样式

377 阅读1分钟

css();方法
获取或设置样式

对以下html标签进行样式的获取和设置

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				height: 200px;
				background-color: pink;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<input type="button" value="获取" id="getBtn" />
		<input type="button" value="设置" id="setBtn" />
		<div id="div1" style="width: 200px;"></div>
		<div id="div2" style="width: 300px;"></div>
		<div id="div3" style="width: 400px;"></div>
	</body>

获取样式

css();方法设置参数,参数为要设置的样式名

<script>
	$(function(){
		$('#getBtn').click(function(){
			console.log($('#div1').css('width'));
			console.log($('#div1').css('height'));
			console.log($('#div1').css('background-color'));
			console.log($('#div1').css('backgroundColor'));
			console.log($('#div1').css('width'));
			console.log($('#div1').css('border'));
		});
	});
</script>

可用驼峰命名也可用css命名方式。注意样式名需要加''

点击获取按钮,结果:
1.png
但是在IE浏览器里,用console.log($('#div1').css('border'));可能会不显示或出现undefined。
在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如:
console.log($('#div1').css('Border-top-width'));//2px
获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如: console.log($('div').css('width'));//200px

设置样式

css(样式名,样式值);
设置的样式是行内样式

设置单样式

<script>
	$(function(){
		$('#setBtn').click(function(){
			$('#div1').css('width','30Opx');
			$('#div1').css('height',300);
			$('#div1').css('backgroundColor','red');
			$('#div1').css('border','10px solid green');
		});
	});
</script>

单样式里样式名必须在''里,宽高度单位px可不写,这时300可不加'',如果加px,则必须为'300px'

设置多样式

<script>
	$(function(){
		$('#setBtn').click(function(){
			$('#div1').css({
				width:300,
				'height':'300px',
				//'background-color':'green',//这样也正确
				 backgroundColor:'green',
				'border-top-width':'10px'
			});
		});
	});
</script>

多样式里样式名可不加''。但是background-color:'green'这样写报错。

给多个div一起设置样式
隐式迭代,把每一个div都设置了同样的样式

<script>
	$(function(){
		$('#setBtn').click(function(){
			$('div').css({
				width:300,
				'height':'300px',
				 backgroundColor:'green',
				'border':'10px solid red',
				marginTop:10
			});
		});
	});
</script>