jQuerycss（）方法动态修改CSS属性

我们先来看个实例

+ -

aafasf

aafasf

aafasf

aafasf

aafasf

css()⽅法在使⽤上具有多样性，我们先来了解css()⽅法基本知识。

css() ⽅法设置或返回被选元素的⼀个或多个样式属性。返回 CSS 属性

如需返回指定的 CSS 属性的值，请使⽤如下语法：

css(\"propertyname\");下⾯的例⼦将返回⾸个匹配元素的 background-color 值：实例

$(\"p\").css(\"background-color\");

设置 CSS 属性

如需设置指定的 CSS 属性，请使⽤如下语法：

css(\"propertyname\下⾯的例⼦将为所有匹配元素设置 background-color 值：实例

$(\"p\").css(\"background-color\

设置多个 CSS 属性

如需设置多个 CSS 属性，请使⽤如下语法：

css({\"propertyname\":\"value\下⾯的例⼦将为所有匹配元素设置 background-color 和 font-size：实例

$(\"p\").css({\"background-color\":\"yellow\

如我们要改变链接颜⾊，我们可以使⽤下⾯的代码：

$(\"#61dh a\").css('color','#123456');

//这⾥选择器‘$(\"#61dh a\")'表⽰ID为‘#61dh'的元素下的所有链接。

//.css(‘color','#123456');表⽰把颜⾊设为'#123456'如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()⽅法。⽰例如下：

var divcss = {

background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC'};

$(\"#result\").css(divcss);

//这⾥我们先定义了⼀个CSS样式属性变量‘divcss'，这类似于建⽴⼀个外部CSS⽂件。

//然后通过jQuery提供的css()⽅法，把属性赋给ID为'#result'的DIV。另外jQuery提供的css()⽅法还可以⽤来查看某个元素的css属性值。例如，我们想查看链接的颜⾊，可以使⽤下⾯的代码：

$(\"#61dh a\").css(\"color\")

//和第⼀个例⼦相似，但是这⾥我们只传递⼀个参数(样式属性)最后要介绍的是如何设置⿏标划过后的链接样式(⽐如: 颜⾊)。我们⽆法使⽤选择器直接选择⿏标划过状态下的链接，也就是说$(\"a:hover\")是不成⽴的。因此我们需要⽤到jQuery提供的事件类⽅法 - hover()。值得注意的是，hover()⽅法需要定义两个函数，⼀个是⿏标划过时；另⼀个是⿏标划过后。具体⽅法如下：

$(\"#61dh a\").css('color','#123456'); $(\"#61dh a\").hover(function(){ $(this).css('color','#999'); },

function(){

$(this).css('color','#123456');});

//hover()⽅法的两个函数使⽤⽤逗号分隔你或许注意到这种⽅法⼀点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()⽅法不是⽤来改变CSS样式的。在实际运⽤中，建议使⽤添加/移出CSS的⽅法来改变⿏标划过的链接样式。