jQuery操作元素css樣式的三種方法
更新時(shí)間：2014年06月04日 15:11:47 作者：
jQuery里提供三種方法來改變頁面元素的樣式，雖然它們和傳統(tǒng)方法的思想相通，但是卻節(jié)省了許多代碼
我們常常要使用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類
$("#target").addClass("newClass");
//#target 指的是需要添加樣式的元素的ID
//newClass 指的是CSS類的名稱
2. removeClass() - 移除CSS類
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS類的元素的ID
//oldClass 指的是CSS類的名稱
3. toggleClass() - 添加或者移除CSS類：如果CSS類已經(jīng)存在，它將被移除；相反，如果CSS類不存在，它將被加上。
$("#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è)完整的例子。
<!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類已經(jīng)存在，它將被移除；相反，如果CSS類不存在，它將被加上。
$("#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ù)制代碼 代碼如下:
<!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>
相關(guān)文章
作為輕量級的JS庫，jQuery隨著JavaScrīpt腳本的大熱而備受Web開發(fā)者親睞。本文給大家分享五個(gè)有用的jquery小技巧，需要的朋友可以參考下2015-10-10
jquery綁定click事件，怎么都不生效，這個(gè)問題很多朋友都有遇到過，下面為大家解決一下,需要的朋友可以參考下2014-02-02
jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})
這篇文章主要介紹了關(guān)于jQuery中animate()的使用方法及解決$("body").animate({"scrollTop":top})不被Firefox支持的問題，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了高效jQuery選擇器的5個(gè)技巧,結(jié)合實(shí)例形式總結(jié)分析了jquery選擇器使用過程中發(fā)的各種常用技巧,需要的朋友可以參考下2019-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動展開與隱藏效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動展開與隱藏效果,涉及jQuery鼠標(biāo)事件的響應(yīng)及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
jQuery EasyUI API 中文幫助文檔和擴(kuò)展實(shí)例
這篇文章主要介紹了jQuery EasyUI API 中文幫助文檔和擴(kuò)展實(shí)例 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果代碼，需要的朋友可以參考下。2011-08-08
這篇文章主要介紹了jQuery防止重復(fù)綁定事件的解決方法,結(jié)合實(shí)例形式分析了jQuery的重復(fù)綁定問題與相應(yīng)的解決方法,需要的朋友可以參考下2016-05-05
NiftyCube——輕松實(shí)現(xiàn)圓角邊框
這篇文章主要介紹了NiftyCube——輕松實(shí)現(xiàn)圓角邊框2007-02-02
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建RSS Feed閱讀器
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，我們將通過 jQuery EasyUI框架創(chuàng)建一個(gè)RSS閱讀器，感興趣的小伙伴們可以參考一下2015-11-11