4-6. jQuery針對「樣式」的控制
jQuery 樣式的取得與改變
| 方法 | 說明 |
|---|---|
| css ( 屬性名稱 ) | 取得指定物件的指定 CSS 屬性 propertyName 的結果。 [參考英文版] [參考簡中版] [參考JQ官網版] |
| css ( 屬性名稱, value ) | 設定指定物件的指定 CSS 屬性為 value 的內容值。 [參考英文版] [參考簡中版] [參考JQ官網版] |
| addClass ( className ) | 將指定物件加上指定的 className 類別名稱。 [參考英文版] [參考簡中版] [參考JQ官網版] |
| removeClass ( className ) | 將指定物件移除指定的 className 類別名稱, 沒有指定的 className 時則移除所有類別名稱。 [參考英文版] [參考簡中版] [參考JQ官網版] |
範例練習 結果展示參考
拷貝 HTML 部份
<h2>========== 測得樣式、改變樣式 ==========</h2>
<p>
<button class="ctr1">1. 偵測取得目前 body 的背景顏色</button>
<button class="ctr2">2. 項目清單中設定隔列換色</button>
<button class="ctr3">3. 清單第3列增加類別名稱sp,改變第3列的樣式</button>
<button class="ctr4">4. 清單第3列移除類別名稱sp</button>
</p>
<ul>
<li>清單項目1111</li>
<li>清單項目2222</li>
<li>清單項目3333</li>
<li>清單項目4444</li>
<li>清單項目5555</li>
<li>清單項目6666</li>
<li>清單項目7777</li>
<li>清單項目8888</li>
</ul>
拷貝 CSS 部份
<style>
body>h2 { font-size: 20px; background-color: #464277; color: #fff; padding: 5px; }
button { font-size:16px; padding:5px; margin:5px; cursor: pointer; }
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>
jQuery 程式部份
