JQuery操作元素的css樣式

更新時(shí)間：2015年03月09日 15:37:25 投稿：hebedich

這篇文章主要介紹了JQuery操作元素的css樣式的相關(guān)資料,需要的朋友可以參考下

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

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

Dom的classname特性來實(shí)現(xiàn)的；而jQuery里提供三種方法來實(shí)現(xiàn)這個(gè)功能，

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

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

1. addClass() – 添加CSS類

復(fù)制代碼代碼如下:

$(“#target”).addClass(“newClass”);

//#target 指的是需要添加樣式的元素的ID

//newClass 指的是CSS類的名稱

2. removeClass() – 移除CSS類

復(fù)制代碼代碼如下:

$(“#target”).removeClass(“oldClass”);

//#target 指的是需要移除CSS類的元素的ID

//oldClass 指的是CSS類的名稱

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

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

復(fù)制代碼代碼如下:

$(“#target”).toggleClass(“newClass”)

//如果ID為“target”的元素已經(jīng)定義了CSS樣式，它將被移除；

//反之，CSS類”newClass“將被賦給該ID。

在實(shí)際運(yùn)用中，我們常常先定義好這些CSS類，然后通過Javascript事件觸

發(fā)（比如點(diǎn)擊某個(gè)鏈接）來改變頁面元素樣式。此外，jQuery還提供一種方

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

下面是一個(gè)完整的例子。

復(fù)制代碼代碼如下:

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