4.8.2　读取和改变CSS属性

jQuery的css（）函数也允许直接修改元素的CSS属性，而不是直接把类样式应用于元素，可以直接添加border或background-color，或者设置positioning属性。可以以三种方式使用css（）函数：找到元素的CSS属性的当前值、在元素上设置CSS属性或者一次设置多个CSS属性。

要确定一个CSS属性的当前值，可以把属性的名字传递给css（）函数。例如，假设想要找到ID为main的＜div＞标签的背景颜色：

var bgColor=$（'#main'）. css（'background-color'）；

这段代码运行之后，变量bgColor将包含一个字符串，其中带有该元素的背景颜色值。

注意：jQuery不能总是按照期望的方式返回CSS值。在颜色方面（例如，CSS背景颜色或颜色属性），jQuery总是返回类似rgb（255，0，10）的RGB值；又或者如果颜色中有任何透明度，那么会返回诸如rgba（255，10，10，.5）的RGBA颜色值。不管样式表中的颜色是否是使用十六进制表示法（#F4477A）定义的，jQuery总是返回RGB值，RGB使用百分比（rgb（100%，10%，0%）或者HSL（hsl（72，100%，50%））形式。此外，jQuery不理解像font、margin、padding或border这样缩写的CSS属性，相反，必须使用特定的CSS属性，例如font-face、margin-top、padding-bottom或border-bottom-width，来访问那些可以和CSS缩写结合的样式。此外，jQuery把所有的单位值都转换为像素，因此，即便使用CSS把＜body＞标签的font-size设置为150%，在查看font-size属性的时候，jQuery还是返回一个像素值。

css（）函数也允许为元素设置CSS属性。要按照这种方式使用该函数，可以为函数提供两个参数：CSS属性名和一个值。例如，要把＜body＞标签的字体扩大两倍，可以这么做：

$（'body'）.css（'font-size'，’200%'）；

提供的第二个参数可能是一个字符串值，例如“200%”，或者是一个数值，jQuery会将其转换为像素。例如，要把带有类.pullquote的所有标签中的内边距修改为100像素，可以编写如下代码：

$（'.pullquote'）.css（'padding'，100）；

在这个例子中，jQuery把padding属性设置为100像素。

注意：当使用jQuery的.css（）函数来设置CSS属性的时候，可以使用CSS缩写方法。例如，下面展示了如何围绕所有带有highligh类的段落，添加一个像素宽度的黑色边框：

$（'p.highlight'）.css（'border'，’1px solid black'）；

根据一个CSS属性的当前值改变其属性，常常是很有用的。例如，假设想要在Web页面上添加一个“Make text bigger”按钮，以便当访问者单击该按钮的时候，页面的font-size增大一倍。要做到这点，读取该值，然后设置一个新值。在这个例子中，首先确定当前的font-size，然后用该值的两倍来设置font-size。这比想象的需要一些技巧。下面是代码，随后是完整的说明：

var baseFont=$（'body'）.css（'font-size'）；

baseFont=parseInt（baseFont，10）；

$（'body'）.css（'font-size'，baseFont*2）；

第一行代码获取＜body＞标签的font-size值，返回值是以像素为单位，并且是一个类似“16px”的字符串。因为想要把这个值增加一倍，所以给它乘以2，必须通过删除字符串的“px”部分将其转换为数字。第二行代码使用14.3.1节介绍的JavaScript parseInt（）方法来实现这一点。该函数只是删除跟在数字后面的任何部分，因此，在第二行之后，baseFont包含一个数值，例如16。最后，第三行代码通过把baseFont的值乘以2重新设置font-size属性。

注意：只有在页面上的其他标签（段落、标题等）使用像em或百分比这样的相对值来设置它们的font-size的时候，这段代码才会影响到页面的字体大小。如果其他的标签使用像素这样的绝对值，改变＜body＞标签的字体大小不会影响到它们。