您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年08月31日 11:46

原创 jQuery.css() 函数详解

4777 次浏览 读完需要≈ 11 分钟

内容目录

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-colorbackgroundColor。建议优先以驼峰式来获取(jQuery底层也是通过DOM来获取的,DOM元素的属性均以驼峰式命名)。

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

4、对于一些速写的css属性,例如marginpaddingbackgroundborder。尽管某些浏览器提供了此功能,但它的结果是无法保证的,有些浏览器也并不支持。以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" || value == "700" ? "normal" : "bold";
});

运行代码

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单