WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

2-12. 【樣式】的取得與改變

jQuery 樣式的取得與改變

方法 說明
css ( 屬性名稱 ) 取得指定物件的指定 CSS 屬性 propertyName 的結果。
[參考英文版] [參考簡中版] [參考JQ官網版]
css ( 屬性名稱, value ) 設定指定物件的指定 CSS 屬性為 value 的內容值。
[參考英文版] [參考簡中版] [參考JQ官網版]
addClass ( className ) 將指定物件加上指定的 className 類別名稱。
[參考英文版] [參考簡中版] [參考JQ官網版]
removeClass ( className ) 將指定物件移除指定的 className 類別名稱,
沒有指定的 className 時則移除所有類別名稱。
[參考英文版] [參考簡中版] [參考JQ官網版]

 

範例小練習 【結果展示參考

  <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>
  <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>

 

 

go TOP