jquery之 css()方法。用法类似的有attr(),prop(),val()

【注】attr(),prop(),val()的用法结构和css()一致，可参考

css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。

该函数属于jQuery对象(实例)。如果需要删除指定的css属性，请使用该函数将其值设为空字符串("")。

语法

css()函数有以下两种用法：

用法一：

jQueryObject.css( propertyName [, value ] )

设置或返回指定css属性propertyName的值。

• 如果指定了value参数，则表示设置css属性propertyName的值为value；
• 如果没有指定value参数，则表示返回css属性propertyName的值。

用法二：

jQueryObject.css( object )

以对象形式同时设置任意多个属性的值。对象object的每个属性对应propertyName，属性的值对应value。

注意：
1、如果省略了value参数，则表示获取属性值；如果指定了该参数，则表示设置属性值。
2、css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素；所有"读取"操作只针对第一个匹配的元素。

参数

请根据前面语法部分所定义的参数名称查找对应的参数。

参数	描述
propertyName	String/Array类型指定的css属性名称(用于设置或返回)，或者css属性名称数组(仅用于返回)。
value	可选/String/Number/Function类型指定的属性值，或返回属性值的函数。
object	Object类型指定的对象，用于封装多个键值对，同时设置多项属性。

jQuery 1.4 新增支持：参数value可以是函数，css()将根据匹配的所有元素遍历执行该函数，函数中的this指针将指向对应的DOM元素。css()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素css属性propertyName当前的值。函数的返回值就是为该元素的css属性propertyName设置的值。

jQuery 1.9 新增支持：如果是"获取"操作(仅限"获取"操作)，参数propertyName还可以是多个css属性名称组成的数组，css()将以对象形式返回多个css属性(对象的属性名称对应css属性名称，属性值对应css属性值)。

返回值

css()函数的返回值是任意类型，返回值的类型取决于当前css()函数执行的是"设置"操作还是"读取"操作。

如果css()函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作，则返回读取到的属性值,带单位。

如果当前jQuery对象匹配多个元素，返回属性值时，css()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。

第二个参数是函数的用法：

　　　　这个函数会针对匹配的元素集中的每个元素都调用一次，调用后的返回值将作为属性的值

 

　　　　　　　　$(document).ready(function() {
　　　　　　　　　　　　$('div.chapter a').attr({
　　　　　　　　　　　　　　rel: 'external',
　　　　　　　　　　　　　   title: 'Learn more at Wikipedia',
　　　　　　　　　　　　　　id: function(index, oldValue) {
　　　　　　　　　　　　　　　　return 'wikilink-' + index;
　　　　　　　　 　　　　　　　}
　　　　　　　　　　　　});
　　　　　　　　　　});
每次触发值回调，都会给它传入两个参数。第一个是一个整数，表示迭代次数，我们在此利用这个值为第一个链接生成的 id 是 wikilink-0 ，为第二个链接生成的 id 是 wikilink-1 ，以此类推。代码清单5-3并没有用到第二个参数，这个参数中保存的是修改之前属性的值。

 

注意事项

1、如果参数value为空字符串("")，则表示删除该css属性。

2、对于多个单词构成的css属性，你可以使用其css格式("-")或者DOM格式(驼峰式)，jQuery都能理解。例如background-color，你可以将propertyName设为background-color或backgroundColor。建议优先以驼峰式来获取(jQuery底层也是通过DOM来获取的，DOM元素的属性均以驼峰式命名)。

3、有些时候获取到的css属性值与你在样式表中设置的值并不完全相同。例如：某些表示尺寸的属性值，你可能在样式表中设置的单位是em、px、ex或者%，但jQuery获取的是经过浏览器计算后css属性值，其单位多数情况下为像素。此外，不同浏览器对于颜色(color)属性值的文本表示也不一致，以white为例，浏览器可能返回white、#FFF、#ffffff、rgb(255,255,255)等，当然它们在逻辑上都表示白色。

4、对于一些速写的css属性，例如margin、padding、background、border。尽管某些浏览器提供了此功能，但它的结果是无法保证的，有些浏览器也并不支持。以margin为例，你可能需要通过css("marginTop")、css("marginRight")等方式来分别获取。从jQuery 1.9开始，你可以传入一个数组来获取多个css属性(以对象形式返回)。

示例&说明

以下面这段HTML代码为例：

<p id="n1" style="font-size: 16px; font-weight:bold; color: #333; margin: 10px 5px;">CodePlayer</p>
<p id="n2" style="font-size: 14px; font-weight:bold; color: #aacd12; padding: 5px ; border: 1px solid #000;">专注于编程开发技术分享</p>

我们编写如下jQuery代码：

var $n1 = $("#n1");
var $n2 = $("#n2");

document.writeln( $n1.css("fontSize" /* 或者"font-size" */ ) );
document.writeln( $n1.css("margin") ); // Chrome：10px 5px | FireFox和IE下无输出
document.writeln( $n1.css("marginTop") ); // 10px (所有浏览器均支持)
document.writeln( $n1.css("marginLeft") ); // 5px (所有浏览器均支持)

// 取消n1的粗体
$n1.css("fontWeight", "normal");

// 更改n2的背景色和字体
$n2.css( { backgroundColor: "#efefef", "font-family": '"Microsoft Yahei"' } );

var styleObj = $n2.css( ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"] );
document.writeln( styleObj.paddingTop ); // 5px
document.writeln( styleObj.paddingRight ); // 5px

// 删除n2的border属性
$n2.css("border", "");

// 更改所有p元素的font-weight属性
// 如果是粗体就还原，不是粗体就加粗
$("p").css("fontWeight", function(index, value){
    return value == "bold" ? "normal" : "bold";     
});