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. 运行效果图
6.3. 点击设置CSS属性按钮
6.4. 点击设置多个CSS属性按钮
6.5. 点击使用函数来设置CSS属性按钮
6.6. 点击清空height属性值按钮
6.7. 点击返回background-color属性值按钮
6.8. 点击返回background属性值按钮