.css()
.css( propertyName ) 返回： String
描述： 为匹配的元素集合中获取第一个元素的样式属性值。
-
version added: 1.0.css( propertyName )
propertyName一个css属性名
.css()方法是为匹配的元素集合中获取第一个元素的样式属性值简单方法，特别是针对不同的浏览器能访问大多数的性质（在标准浏览器中的getComputedStyle()相当于Internet Explorer中的currentStyle 在 runtimeStyle ）和不同类型的浏览器某几个属性 。举个例子， Internet Explorer的DOM 将float 属性 当作 styleFloat实现，标准浏览器将float 属性 当作cssFloat。 .css() 方法 解决了这些差异，无论我们使用那一项都会返回同样的结果。举个例子了，下文的三行代码中的这个左浮元素将返回left 字符串：
$('div.left').css('float');$('div.left').css('cssFloat');$('div.left').css('styleFloat');
另外,jQuery可以同样解析CSS和用multiple-word（用横杠连接的词，比如：background-color）属性格式化的DOM。举个例子：jquery能解析.css('background-color') 和 .css('backgroundColor')并且返回正确的值。
简写速写的CSS属性(例如： margin, background, border) 是不支持的，如果你想重新获取已经渲染的margin，可以使用$(elem).css('marginTop') 和 $(elem).css('marginRight')，其他的也是如此。
举例：
使用点击div的背景颜色
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
</script>
</body>
</html>Demo:
.css( propertyName, value ) 返回： jQuery
描述： 为匹配的元素设置一个或多个CSS属性。
-
version added: 1.0.css( propertyName, value )
propertyName一个CSS属性名
value一个CSS属性名的值
-
version added: 1.4.css( propertyName, function(index, value) )
propertyName一个CSS属性名
function(index, value)一个返回设置值的函数。接收元素的索引位置和元素旧的样式属性值作为参数。
-
version added: 1.0.css( map )
mapA map of property-value pairs to set.
和.attr()方法一样，.css()方法使得设置元素的CSS属性快速而又简单。这个方法可以使用任何一个CSS属性名和用空格隔开的值，或者一个“名/值对”对象(JavaScript 对象符号)作为参数。
另外,jQuery可以同样解析CSS和用multiple-word（用横杠连接的词，比如：background-color）属性格式化的DOM。举个例子：jquery能解析.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) 和 .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})并且返回正确的值（注意这两条语句的单引号和“-”）。值得注意的是用注意用DOM的符号，属性名名两边的引号是可选的，但是如果属性名包含 "-"的话，必须使用引号。
和.attr()一样, .css()允许我们传递一个函数用于传递属性值：
$('div.example').css('width', function(index) {
return index * 50;
});
这个例子设置匹配元素的宽度递增。
举例：
例子： 通过mouseover事件改变一些段落的颜色为红色。
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; width:200px; font-size:14px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p>Just roll the mouse over me.</p>
<p>Or me to see a color change.</p>
<script>
$("p").mouseover(function () {
$(this).css("color","red");
});
</script>
</body>
</html>Demo:
例子： 突出段落中点击文本。
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; font-weight:bold; cursor:pointer; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p>
Once upon a time there was a man
who lived in a pizza parlor. This
man just loved pizza and ate it all
the time. He went on to be the
happiest man in the world. The end.
</p>
<script>
var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function () {
$(this).css("background-color","yellow");
});
</script>
</body>
</html>Demo:
例子： 设置所有段落的文本颜色为红色背景为蓝色：
<!DOCTYPE html>
<html>
<head>
<style>
p { color:green; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
<script>
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
</script>
</body>
</html>Demo:
例子： 当你点击一个div的时候递增他的尺寸
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 20px; height: 15px; background-color: #f33; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div>click</div>
<div>click</div>
<script>
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
</script>
</body>
</html>