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。
注意事项
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 ); // 5pxdocument.writeln( styleObj.paddingRight ); // 5px
// 删除n2的border属性$n2.css("border", "");
// 更改所有p元素的font-weight属性// 如果是粗体就还原，不是粗体就加粗$("p").css("fontWeight", function(index, value){ return value == "bold" ? "normal" : "bold"; });