jQuery操作元素css樣式的三種方法
更新時間：2014年06月04日 15:11:47 作者：
jQuery里提供三種方法來改變頁面元素的樣式，雖然它們和傳統(tǒng)方法的思想相通，但是卻節(jié)省了許多代碼
我們常常要使用Javascript來改變頁面元素的樣式。其中一種辦法是改變頁面元素的CSS類(Class)，這在傳統(tǒng)的Javascript里，我們通常是通過處理HTML Dom的classname特性來實現(xiàn)的；而jQuery里提供三種方法來實現(xiàn)這個功能，雖然它們和傳統(tǒng)方法的思想相通，但是卻節(jié)省了許多代碼。還是那句話 - “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事件觸發(fā)（比如點擊某個鏈接）來改變頁面元素樣式。此外，jQuery還提供一種方法 hasClass("className")用來判斷某個元素是否已經被賦予某個CSS類。
下面是一個完整的例子。
<!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>
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事件觸發(fā)（比如點擊某個鏈接）來改變頁面元素樣式。此外，jQuery還提供一種方法 hasClass("className")用來判斷某個元素是否已經被賦予某個CSS類。
下面是一個完整的例子。
復制代碼 代碼如下:
<!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>
相關文章
作為輕量級的JS庫，jQuery隨著JavaScrīpt腳本的大熱而備受Web開發(fā)者親睞。本文給大家分享五個有用的jquery小技巧，需要的朋友可以參考下2015-10-10
jquery綁定click事件，怎么都不生效，這個問題很多朋友都有遇到過，下面為大家解決一下,需要的朋友可以參考下2014-02-02
jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})
這篇文章主要介紹了關于jQuery中animate()的使用方法及解決$("body").animate({"scrollTop":top})不被Firefox支持的問題，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了高效jQuery選擇器的5個技巧,結合實例形式總結分析了jquery選擇器使用過程中發(fā)的各種常用技巧,需要的朋友可以參考下2019-11-11
jQuery實現(xiàn)鼠標滑過鏈接控制圖片的滑動展開與隱藏效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過鏈接控制圖片的滑動展開與隱藏效果,涉及jQuery鼠標事件的響應及鏈式操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery EasyUI API 中文幫助文檔和擴展實例 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
JQuery+JS實現(xiàn)仿百度搜索結果中關鍵字變色效果
JQuery+JS實現(xiàn)仿百度搜索結果中關鍵字變色效果代碼，需要的朋友可以參考下。2011-08-08
這篇文章主要介紹了jQuery防止重復綁定事件的解決方法,結合實例形式分析了jQuery的重復綁定問題與相應的解決方法,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了NiftyCube——輕松實現(xiàn)圓角邊框2007-02-02
輕松學習jQuery插件EasyUI EasyUI創(chuàng)建RSS Feed閱讀器
這篇文章主要幫助大家輕松學習jQuery插件EasyUI，我們將通過 jQuery EasyUI框架創(chuàng)建一個RSS閱讀器，感興趣的小伙伴們可以參考一下2015-11-11