天天看点

jQuery使用手册之CSS操作(4)

Jquery对css的操作相当方便,能很方便我们去通过js修改css。传统javascript对css的操作相当繁琐,比如

<code>&lt;div id="a" style="background:blue"&gt;css&lt;/div&gt;</code>

取它的background语法是:

<code>document.getElementById("a").style.background</code>

而jQuery对css更方便的操作:

<code>$("#a").background();$("#a").background(“red”)</code>

说明如下

$("#a")得到jQuery对象[

&lt;div id="a" … /div&gt;

]

$("#a").background()将取出该对象的background样式。

$("#a").background(“red”)将该对象的background样式设为redjQuery提供了以下方法,来操作css:

background ()

background (val)

color()

color(val)

css(name)

css(prop)

css(key, value)

float()

float(val)

height()

height(val)

width()

width(val)  

left()

left(val)

overflow()

overflow(val)

position()

position(val)

top()

top(val)

这里需要讲解一下css(name);css(prop);css(key,

value),其他的看名字都知道什么作用了!

<code>&lt;div id="a" style="background:blue; color:red"&gt;css&lt;/div&gt;&lt;P id="b"&gt;test&lt;/P&gt;</code>

css(name):获取样式名为name的样式

$("#a").css("color"):将得到样式中color值red,("#a").css("background

")将得到blue

css(prop):prop是一个hash对象,用于设置大量的css样式

<code>$("#b").css({ color: "red", background: "blue" });</code>

最终效果是

<code>&lt;p id="b" style="background:blue; color:red"&gt;test&lt;/p&gt;</code>

{ color: "red", background: "blue"

},hash对象,color为key,"red"为value,

css(key, value)  用于设置一个单独得css样式

<code>$("#b").css("color","red");</code>

<code>&lt;p id="b" style="color:red"&gt;test&lt;/p&gt;</code>

继续阅读