4.1 修改内联 CSS

在接触漂亮的jQuery效果之前,有必要先简单地谈一谈CSS。在前几章中,为了修改文档的外观,我们都是先在单独的样式表中为类定义好样式,然后再通过jQuery来添加或者移除这些类。
一般而言,这都是为HTML应用CSS的首选方式,因为这种方式不会影响样式表负责处理页面表现的角色。但是,在有些情况下,可能我们要使用的样式没有在样式表中定义,或者通过样式表定义不是那么容易。针对这种情况,jQuery提供了.css()方法。

.css方法描述

这个.css()方法集getter方法和setter方法于一身。通过.css()既可以设置CSS属性也可以获取CSS属性值

如何取样式属性的值

获取单个属性值

为取得某个样式属性的值,可以传递一个字符串形式的属性名作为.css()方法的参数,然后就得到一个字符串形式的属性值。

获取多个属性值

要取得多个样式属性的值,可以传入属性名的数组作为作为.css()方法的参数,这样得到的是属性和值构成的对象。

对于由多个单词构成的属性名,jQuery既可以解释连字符版的CSS表示法(如background-color) ,也可以解释驼峰大小写形式的DOM表示法(如backgroundColor)。

//取得单个属性的值,返回"value" 
.css('property') 
//取得多个属性的值,返回{"property1": "value1", "property-2": "value2"} 
.css(['property1', 'property-2']) 

如何设置样式属性

在设置样式属性时,.css()方法能够接受的参数有两种:

设置一个样式属性

传递两个参数作为.css()方法的参数,第一个参数是样式属性，第二个参数是该样式属性的值,示例代码如下:

//单个属性及其值 
.css('property', 'value') 

设置多个样式属性

传递一个由属性-属性值对构成的对象作为.css()方法的参数,示例代码如下:

//属性-值对构成的对象 
.css({ 
  property1: 'value1', 
  'property-2': 'value2' 
}) 

对象字面量

这些键值对的集合叫对象字面量,是在代码中直接创建的JavaScript对象。

一般来说,数字值不需要加引号而字符串值需要加引号。由于属性名是字符串,所以属性通常是需要加引号的。但是,如果对象字面量中的属性名是有效的JavaScript标识符,比如使用驼峰大小写形式的DOM表示法时,则可以省略引号。

使用.css()的方式与前面使用.addClass()的方式相同——将它连缀到jQuery对象后面,这个jQuery对象包含一组DOM元素。为此,我们仍以第3章的样式转换器为例,但这次使用的HTML稍有不同:
在通过链接的样式表为这个文档添加了一些基本样式规则之后,初始的页面如图4-1所示。

有了这些代码之后,单击Bigger和Smaller按钮,会增大或缩小<div class="speech">中文本的字体大小,而单击Default按钮,则会把<div class="speech">中文本的字体重置为初始大小。

本文重点

.css()方法

jQuery提供的.css()方法用于要使用的样式没有在样式表中定义,或者通过样式表定义不是那么容易的情况下.
通过.css()既可以设置样式属性也可以获取样式属性的值.

获取样式属性值

获取单个样式属性值

为取得某个样式属性的值,可以传递一个字符串形式的属性名作为.css()方法的参数,然后就得到一个字符串形式的属性值。

获取多个样式属性值

要取得多个样式属性的值,可以传入属性名的数组作为.css()方法的参数,这样得到的是属性和值构成的对象。

设置样式属性

设置一个样式属性

传递两个参数作为.css()方法的参数,第一个参数是样式属性，第二个参数是该样式属性的值

设置多个样式属性

传递一个由属性-属性值对构成的对象作为.css()方法的参数