016_css()方法

最新推荐文章于 2024-08-23 19:30:00 发布

原创最新推荐文章于 2024-08-23 19:30:00 发布 · 806 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #html5

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了jQuery的css()方法，包括设置和获取CSS属性值，设置多个属性，使用函数动态设置属性值，以及清除属性值。通过示例代码展示了如何操作元素的样式，如改变背景色、尺寸等，并演示了获取颜色和复合属性值的方法。

1. css()方法返回或设置匹配的元素的一个或多个样式属性。

2. 返回CSS属性值

2.1. 返回第一个匹配元素的CSS属性值。

2.2. 注释: 当用于返回一个值时, 不支持简写的CSS属性(比如: "background"和"border")。

2.3. 语法

$(selector).css(name)

2.4. 参数

3. 设置CSS属性

3.1. 设置所有匹配元素的指定CSS属性。

3.2. 语法

$(selector).css(name,value)

3.3. 参数

4. 设置多个CSS属性

4.1. 把"名/值对"对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

4.2. 语法

$(selector).css({property:value, property:value, ...})

4.3. 参数

5. 使用函数来设置CSS属性

5.1. 此函数返回要设置的属性值。接受两个参数, index为元素在对象集合中的索引位置, value是原先的属性值。

5.2. 语法

$(selector).css(name,function(index,value))

5.3. 参数

6. 例子

6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css()方法</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("#p1").css('background', 'red');
				});
				$('#btn2').click(function(){
					$("p").css({'width': '400px', 'height': '100px'});
				});
				$('#btn3').click(function(){
					$("#p2").css('background', function(index, value){
						return 'green';
					});
				});
				$('#btn4').click(function(){
					$("p").css('height', '');
				});
				$('#btn5').click(function(){
					alert($("p").css('background-color'));
				});
				$('#btn6').click(function(){
					alert($("p").css('background'));
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">css()方法返回或设置匹配的元素的一个或多个样式属性。</p>
		<p id="p2">css()方法返回第一个匹配元素的CSS属性值。</p>
		<button id="btn1">设置CSS属性</button> <button id="btn2">设置多个CSS属性</button> <button id="btn3">使用函数来设置CSS属性</button><br /><br /> 
		<button id="btn4">清空height属性值</button> <button id="btn5">返回background-color属性值</button> <button id="btn6">返回background属性值</button> 
	</body>
</html>

6.2. 运行效果图