CSS類別操作--.addClass()
- 詳細內容
- 分類:JQuery
- 發佈:2013-08-01, 週四 21:15
- 點擊數:2779
JQuery:CSS類別操作--.addClass():
.addClass()方法可以為匹配的元素添加新的CSS類別。此方法只能單純的新增CSS類別到元素中。並不能移除或取代原本就有的類別。
語法:
.addClass( className )
className:要添加到元素中的CSS類別名稱,可以是一個或多個用空白間隔開來的CSS類別名稱。
.addClass( function(index, currentClass) )
function:function 是個回呼函式,JQuery會為每個匹配的元素呼叫一次該函式,並且將該函式傳回的值當成CSS類別名稱,添加到匹配的元素中。此function中的this指向的是當時正在處理的匹配元素。
index:回呼函式的傳入值,JQuery會將匹配索引以此參數傳入,代表第幾個匹配元素。
currentClass:回呼函式的傳入值,代表目前元素中的CSS類別。
CSS類別操作--.addClass()的範例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>addClass範例</title> <style> .yellow{ background: yellow; } .red { background: red; } .green { background: green; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div>原本沒有添加任何CSS 類別的段落</div> <div>使用.addClass.addClass( function(index, currentClass) )變成紅色背景</div> <div>使用.addClass.addClass( function(index, currentClass) )變成綠色背景</div> <p>使用.addClass("yellow")變成黃色背景</p> <script type="text/javascript"> $( "p" ).addClass("yellow") ; $( "div" ).addClass(function(index,cc){ if(index==0){ // no change } if(index==1){ return "red"; } if(index==2){ return "green"; } }) ; </script> </body> </html>
輸出:
其他CSS類別操作請參考:CSS class屬性操作。
按個讚!~支持本站!~
FB推薦載入中