JQUERY學習之：CSS操作

 

     
傳統
javascript
對
css
的操作相當繁瑣，比如
<div
id="a" style="background:blue">css</div>
取它的
background
文法是
document.getElementById("a").style.background

，而
jQuery
對
css
更方便的操作，
$("#a").background()
，
$("#a").background(“red”)
$("#a")
得到
jQuery
對象
[ <div id="a" … /div> ]
$("#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)
，其他的看名字都知道什麼作用了！

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

css(name)
 

擷取樣式名為
name
的樣式


$("#a").css("color")
將得到樣式中
color
值
red
，
("#a").css("background ")
將得到
blue

css(prop)
 
prop
是一個
hash
對象，用於設定大量的
css
樣式


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

最終效果是
<p id="b" style="background:blue;
color:red">test</p>,{ color: "red", background:
"blue" }
，
hash
對象，
color
為
key
，
"red"
為
value
，


css(key, value)
 
用於設定一個單獨得
css
樣式



$("#b").css("color","red");
最終效果是
<p id="b"
style="color:red">test</p>