learning jQuery 学习笔记七（+jQuery 1.4.1 API）-- 效果-修改内联CSS

注：本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

修改内联CSS

.css()方法，这个方法集获取和设置方法于一体。为取得某个样式属性的值，可以为这个方法传递一个字符串形式的属性名，比如.css(‘backgroundColor’)。对于多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法（如background-color），也可以解释驼峰大小写形式（camel-cased）的DOM表示法（如backgroundColor）。在设置样式属性时，.css方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种则是为它传递一个由属性-值对构成的映射（map）：

jQuery 1.4.1 API

css(name)----à.css(‘proerty’,’value’)

返回值:String css(name)

概述

访问第一个匹配元素的样式属性。

参数

name String

要访问的属性名称

示例

描述:

取得第一个段落的color样式属性的值。

jQuery 代码:

$("p").css("color");

css(proerties)----à.css({proerty1:”value1”,proerty2:”value2’’})

返回值:jQuery css(properties)

概述

把一个“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

参数

Properties Map

要设置为样式属性的名/值对

示例

描述:

将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:

$("p").css({color: "#ff0011", background: "blue" });

描述:

如果属性名包含 "-"的话，必须使用引号:

jQuery 代码:

$("p").css({"margin-left": "10px", "background-color":"blue" });

示例：

$(document).ready(function(){

$(‘#switcher-large’).click(function(){

var$speech = $(‘div.speech’);

varcurrentSzie = $speech.css(‘fontSize’);

varnum = parseFloat(currentSzie,10);

varunit = currentSize.slice(-2);

if(this.id== ‘switcher-large’){

num *= 1.4;

}else if(this.id == ‘switcher-small’){

Num /= 1.4;

}

$speech.css(‘fontSize’,num+unit);

});

});

通过$(‘div.speech’).css(‘fontSize’)可以轻而易举地取得当前的字体大小，但是包含了度量单位，所以要将这两部分保存到各自的变量中，在乘出新的字体大小后，再重新加上单位。 parseFloat()函数会在一个字符串从左到右的查找一个浮点数，并且会去掉结尾的非数字字符，最终转换为数字。例如字符串12px 转为数字12。

.slice()方法返回字符串中从指定 的字符串开始的一个子字符串。因为这里使用的度量单位(px)是两个字符，所以我们指定子字符串应该从倒数第2个字符开始。