.css()
.css( propertyName ) 返回： String
描述： 為匹配的元素集合中獲取第一個(gè)元素的樣式屬性值。
-
version added: 1.0.css( propertyName )
propertyName一個(gè)css屬性名
.css()方法是為匹配的元素集合中獲取第一個(gè)元素的樣式屬性值簡(jiǎn)單方法，特別是針對(duì)不同的瀏覽器能訪問大多數(shù)的性質(zhì)（在標(biāo)準(zhǔn)瀏覽器中的getComputedStyle()相當(dāng)于Internet Explorer中的currentStyle 在 runtimeStyle ）和不同類型的瀏覽器某幾個(gè)屬性 。舉個(gè)例子， Internet Explorer的DOM 將float 屬性 當(dāng)作 styleFloat實(shí)現(xiàn)，標(biāo)準(zhǔn)瀏覽器將float 屬性 當(dāng)作cssFloat。 .css() 方法 解決了這些差異，無論我們使用那一項(xiàng)都會(huì)返回同樣的結(jié)果。舉個(gè)例子了，下文的三行代碼中的這個(gè)左浮元素將返回left 字符串：
$('div.left').css('float');$('div.left').css('cssFloat');$('div.left').css('styleFloat');
另外,jQuery可以同樣解析CSS和用multiple-word（用橫杠連接的詞，比如：background-color）屬性格式化的DOM。舉個(gè)例子：jquery能解析.css('background-color') 和 .css('backgroundColor')并且返回正確的值。
簡(jiǎn)寫速寫的CSS屬性(例如： margin, background, border) 是不支持的，如果你想重新獲取已經(jīng)渲染的margin，可以使用$(elem).css('marginTop') 和 $(elem).css('marginRight')，其他的也是如此。
舉例：
使用點(diǎn)擊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
描述： 為匹配的元素設(shè)置一個(gè)或多個(gè)CSS屬性。
-
version added: 1.0.css( propertyName, value )
propertyName一個(gè)CSS屬性名
value一個(gè)CSS屬性名的值
-
version added: 1.4.css( propertyName, function(index, value) )
propertyName一個(gè)CSS屬性名
function(index, value)一個(gè)返回設(shè)置值的函數(shù)。接收元素的索引位置和元素舊的樣式屬性值作為參數(shù)。
-
version added: 1.0.css( map )
mapA map of property-value pairs to set.
和.attr()方法一樣，.css()方法使得設(shè)置元素的CSS屬性快速而又簡(jiǎn)單。這個(gè)方法可以使用任何一個(gè)CSS屬性名和用空格隔開的值，或者一個(gè)“名/值對(duì)”對(duì)象(JavaScript 對(duì)象符號(hào))作為參數(shù)。
另外,jQuery可以同樣解析CSS和用multiple-word（用橫杠連接的詞，比如：background-color）屬性格式化的DOM。舉個(gè)例子：jquery能解析.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) 和 .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})并且返回正確的值（注意這兩條語(yǔ)句的單引號(hào)和“-”）。值得注意的是用注意用DOM的符號(hào)，屬性名名兩邊的引號(hào)是可選的，但是如果屬性名包含 "-"的話，必須使用引號(hào)。
和.attr()一樣, .css()允許我們傳遞一個(gè)函數(shù)用于傳遞屬性值：
$('div.example').css('width', function(index) {
return index * 50;
});
這個(gè)例子設(shè)置匹配元素的寬度遞增。
舉例：
例子： 通過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:
例子： 突出段落中點(diǎn)擊文本。
<!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:
例子： 設(shè)置所有段落的文本顏色為紅色背景為藍(lán)色：
<!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:
例子： 當(dāng)你點(diǎn)擊一個(gè)div的時(shí)候遞增他的尺寸
<!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>