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,改變第五列的樣式</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>

 

 

go TOP