首頁 > 開發者 > CSS

JQuery操作元素的css樣式_jquery

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我們常常要使用Javascript來改變頁面元素的樣式。其中一種辦法是改變頁面元

素的CSS類(Class)，這在傳統的Javascript裡，我們通常是通過處理HTML

Dom的classname特性來實現的；而jQuery裡提供三種方法來實現這個功能，

雖然它們和傳統方法的思想相通，但是卻節省了許多代碼。還是那句 話 –

“jQuery讓JavaScript代碼變得簡潔！”

1. addClass() – 添加CSS類

複製代碼 代碼如下:

$(“#target”).addClass(“newClass”);
//#target 指的是需要添加樣式的元素的ID
//newClass 指的是CSS類的名稱

2. removeClass() – 移除CSS類

複製代碼 代碼如下:

$(“#target”).removeClass(“oldClass”);
//#target 指的是需要移除CSS類的元素的ID
//oldClass 指的是CSS類的名稱

3. toggleClass() – 添加或者移除CSS類：如果CSS類已經存在，它將被移除；

相反，如果CSS類不存在，它將被加上。

複製代碼 代碼如下:

$(“#target”).toggleClass(“newClass”)
//如果ID為“target”的元素已經定義了CSS樣式，它將被移除；
//反之，CSS類”newClass“將被賦給該ID。

在實際運用中，我們常常先定義好這些CSS類，然後通過Javascript事件觸

發（比如點擊某個連結）來改變頁面元素樣式。此外，jQuery還提供一種方

法 hasClass(“className”)用來判斷某個元素是否已經被賦予某個CSS類。

下面是一個完整的例子。

複製代碼 代碼如下:

 <span style=”font-size:18px;”><!DOCTYPE HTML> 
     <head> 
     <title>圖片閃爍</title> 
     <style type=”text/css”> 
     @-webkit-keyframes twinkling{   /*透明度由0到1*/ 
         0%{ 
             opacity:0;              /*透明度為0*/ 
         } 
         100%{ 
             opacity:1;              /*透明度為1*/ 
         } 
     } 
     .up{ 
         -webkit-animation: twinkling 1s infinite ease-in-out; 
     } 
     </style> 
     </head> 
     <body> 
     <div id=”soccer” class=”up”> 
     哈哈 
     </div> 
     <br/> 
     <input type=”button”  onclick='btnClick()'> 
     <script src=”./jQuery/jquery-1.8.3.js” type=”text/javascript”></script>
     <script> 
     function btnClick(){ 
     //$(“#soccer”).removeClass(“up”); 
     $(“#soccer”).toggleClass(“up”); 
      //$(“p:first”).removeClass(“intro”); 
     } 
</script>
     </body> 
     </html>
 </span>

以上所述就是本文關於jQuery操作CSS樣式的全部內容了，希望大家能夠喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More