| 方法 | 說明 |
|---|---|
| css ( 屬性名稱 ) | 取得指定物件的指定 CSS 屬性 propertyName 的結果。 [參考英文版] [參考簡中版] [參考JQ官網版] |
| css ( 屬性名稱, value ) | 設定指定物件的指定 CSS 屬性為 value 的內容值。 [參考英文版] [參考簡中版] [參考JQ官網版] |
| addClass ( className ) | 將指定物件加上指定的 className 類別名稱。 [參考英文版] [參考簡中版] [參考JQ官網版] |
| removeClass ( className ) | 將指定物件移除指定的 className 類別名稱, 沒有指定的 className 時則移除所有類別名稱。 [參考英文版] [參考簡中版] [參考JQ官網版] |
WEB <h2>========== 測得樣式、改變樣式 ==========</h2>
<p>
<button class="ctr1">1. 偵測取得目前 body 的背景顏色</button>
<button class="ctr2">2. 項目清單中設定隔列換色</button>
<button class="ctr3">3. 清單第3列增加類別名稱sp,改變第五列的樣式</button>
<button class="ctr4">4. 清單第3列移除類別名稱sp</button>
</p>
<ul>
<li>清單項目1111</li>
<li>清單項目2222</li>
<li>清單項目3333</li>
</ul>
<style>
body>h2 { font-size: 20px; background-color: #464277; color: #fff; padding: 5px; }
button { font-size:16px; padding:5px; margin:5px; }
li { font-size:18px; padding:5px; margin: 5px; font-weight: bold; }
.sp { background-color:#FFF06D; color:#B76C00;
font-size:36px; font-style:italic; font-weight:bold; }
</style>
<script>
$('.ctr1').click(function(){
//偵測取得 body 的背景顏色樣式
var result = $('body').css('background-color');
alert('目前<body>的背景顏色 = '+result);
});
$('.ctr2').click(function(){
//設定 li 奇數列的背景顏色及文字顏色, 方法一
$('li:odd').css('background-color','#c0c4ff')
.css('color','#0b0e71');
//設定 li 偶數列的背景顏色及文字顏色, 方法二
$('li:even').css({'background-color':'#0b0e71','color':'#c0c4ff'});
});
$('.ctr3').click(function(){
$('li:eq(2)').addClass('sp'); //addClass()增加class名稱
});
$('.ctr4').click(function(){
$('li:eq(2)').removeClass('sp'); //removeClass()移除class名稱
});
</script>