.css()
.css( propertyName )
描述：针对匹配的元素集合中的第一个元素，获得一个计算过的样式属性的值。
- propertyName类型：String一个CSS属性
- propertyNames类型：Array一个或多个CSS属性的数组。
.css()方法是一个便利的方法，从第一个匹配元素上获得经计算的样式属性，尤其是考虑到不同浏览器对大部分的属性访问（在基于标准的浏览器中的getComputedStyle()方法，相当于Internet Explorer中的currentStyle属性和runtimeStyle元素）并且，某些CSS属性，不同浏览器的写法不一。比如说，Internet Explorer的DOM编译器用styleFloat指代float属性，与此同时，服从W3C标准的浏览器用cssFloat指代它。为了统一性，你可以简单使用"float"，而且jQuery会把它转换成每种浏览器的当前值。
而且，jQuery还会平等地翻译多单词属性的CSS形式和DOM形式。举个例子，jQuery理解并返回了.css( "background-color")和.css( backgroundColor )的正确值。这意味着混合大小写有不同的含义，比如说：.css( "WiDtH" )与.css( "width" )并不相同。
注意，一个元素的计算样式可能不同于在样式表中对元素指定的那个值。比如说，维度的计算样式总是以像素计的，但是在样式表中它们可能是用em、ex、px或者%指定的。不同的浏览器可以返回逻辑上相等但是字面上不等的CSS颜色值，例如，#FFF、#ffffff以及rgb(255,255,255)。
检索CSS属性的简写（例如，margin、background、border），虽然有些浏览器有这样的功能，但是不能保证。举个例子，如果你想检索到呈现的border-width，请使用$( elem ).css( "borderTopWidth" )、$( elem ).css( "borderBottomWidth" )，等等。
对一个元素调用.css()方法时，它必须连接到DOM。否则，jQuery将抛出一个错误。
自从jQuery 1.9，向.css()传递一个样式数据数组，将导致一个属性-值对的对象。举个例子，要想检索border-width的全部四个呈现值，你可以使用$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])。
示例
获得一个点击过的div的背景色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果
获得一个点击过的div的宽度、高度、字色以及背景色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb(255, 255, 255);
background-color: rgb(15, 99, 30);
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="result"> </p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<script>
$( "div" ).click(function() {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $( this ).css([
"width", "height", "color", "background-color"
]);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
});
</script>
</body>
</html>
演示结果
.css( propertyName )
描述：针对每个匹配的元素，设置一个或多个CSS属性。
- propertyName类型：String一个CSS属性名称
- function一个函数，它返回要设置的值。
this是当前的元素。检索在集合中该元素的索引值的位置，以及旧值作为参数。
- properties类型：PlainObject一个要设置的属性-值对对象。
就和.prop()方法那样，.css()方法使设置元素的属性变得快速而且简单。该方法可以取一个属性名和值，作为独立的参数，也可以取一个键值对对象作为参数。
而且，jQuery还能平等地对待多单词属性的CSS形式和DOM形式。举个例子，jQuery理解并返回了.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })和.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })的正确值。注意，利用DOM记号法，属性名周围的引号是可有可无的，但是利用CSS记号法，对于属性名中带短横的属性，引号是必不可少的。
如果传递一个数字作为值，jQuery将把它转换成字符串，并在字符串末尾添加px。如果属性需要除了px之外的单位，请在调用这个方法之前把值转换成字符串，并添加合适的单位。
在将.css()用作设置器的野外，jQuery修改了元素的style属性。举个例子，$( "#mydiv" ).css( "color", "green" )等同于document.getElementById( "mydiv" ).style.color = "green"。把样式属性的值设置为空字符串——例如，$( "#mydiv" ).css( "color", "" )——如果它已经直接应用到该属性上了的话，会从这个元素上删除该属性，无论它是在HTML 的元素属性style上，还是通过jQuery的.css()方法应用这个属性，还是通过直接操纵DOM的style属性。作为结果，针对该属性的元素的样式将保存为被应用的值。因此，这个方法可以用来撤消你之前实施的任何样式修改。然而，它并不会删除已经用样式表文件或者<style>元素中的CSS规则应用的样式。警告：一个值得注意的例外是：对于IE 8及以前的版本，删除一个简写的属性，比如说border或者background将从元素上删除整个样式，无论在样式表文件或者<style>元素中怎么设置它。
自从jQuery 1.8,.css设置器将自动照顾属性名的前缀。举个例子，在Chrome/Safari中，取用.css( "user-select", "none" )会自动设置为-webkit-user-select，Firefox会使用-moz-user-select，而IE10会使用-ms-user-select。
自从jQuery 1.6，.css()接受相对值，近似于.animate()。相对值是用+=或-=开头的字符串，用来递增或递减当前值。举个例子，如果一个元素的padding-left是10px，.css( "padding-left", "+=15" )将产生一个padding-left:25px。
自从jQuery 1.4，.css()允许我们传入一个函数作为属性值。
$( "div.example" ).css( "width", function( index ) {
return index * 50;
});
该示例把匹配的元素的宽度设置成一个逐渐增大的值。
注意：如果在设置函数中没有返回任何东西（亦即，function( index, style ){} ），或者如果返回了undefined，当前的值并没有变化。这可以用来有选择地设置只有满足某些标准的值。
示例
当鼠标移到任一个段落文本上时，改变它的字色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
p {
color: blue;
width: 200px;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Just roll the mouse over me.</p>
<p>Or me to see a color change.</p>
<script>
$( "p" ).on( "mouseover", function() {
$( this ).css( "color", "red" );
});
</script>
</body>
</html>
演示结果
在第一次点击div#box的时候给它增加200像素宽度。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
#box {
background: black;
color: snow;
width: 100px;
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="box">Click me to grow</div>
<script>
$( "#box" ).one( "click", function() {
$( this ).css( "width", "+=200" );
});
</script>
</body>
</html>
演示结果
在段落文本中，高亮被点击的单词。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
p {
color: blue;
font-weight: bold;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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( /\s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
$( this ).css( "background-color", "yellow" );
});
</script>
</body>
</html>
演示结果
当鼠标移进移出时，改变font-weight和background-color。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
p {
color: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
<script>
$( "p" )
.on( "mouseenter", function() {
$( this ).css({
"background-color": "yellow",
"font-weight": "bolder"
});
})
.on( "mouseleave", function() {
var styles = {
backgroundColor : "#ddd",
fontWeight: ""
};
$( this ).css( styles );
});
</script>
</body>
</html>
演示结果
在点击一个div时增加它的尺寸。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
width: 20px;
height: 15px;
background-color: #f33;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>click</div>
<div>click</div>
<script>
$( "div" ).on( "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>
演示结果