jQuery 添加/移除CSS類實(shí)現(xiàn)代碼
更新時(shí)間：2010年02月11日 12:25:14 作者：
在網(wǎng)頁(yè)設(shè)計(jì)中，我們常常要使用Javascript來(lái)改變頁(yè)面元素的樣式。
其中一種辦法是改變頁(yè)面元素的CSS類(Class)，這在傳統(tǒng)的Javascript里，我們通常是通過(guò)處理HTML Dom的classname特性來(lái)實(shí)現(xiàn)的；而jQuery里提供三種方法來(lái)實(shí)現(xiàn)這個(gè)功能，雖然它們和傳統(tǒng)方法的思想相通，但是卻節(jié)省了許多代碼。還是那句話 - “jQuery讓JavaScript代碼變得簡(jiǎn)潔！”
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。
4.hasClass("className") - 判斷是否已經(jīng)存在CSS
在實(shí)際運(yùn)用中，我們常常先定義好這些CSS類，然后通過(guò)Javascript事件觸發(fā)（比如點(diǎn)擊某個(gè)鏈接）來(lái)改變頁(yè)面元素樣式。此外，jQuery還提供一種方法 hasClass("className")，用來(lái)判斷某個(gè)元素是否已經(jīng)被賦予某個(gè)CSS類。
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。
4.hasClass("className") - 判斷是否已經(jīng)存在CSS
在實(shí)際運(yùn)用中，我們常常先定義好這些CSS類，然后通過(guò)Javascript事件觸發(fā)（比如點(diǎn)擊某個(gè)鏈接）來(lái)改變頁(yè)面元素樣式。此外，jQuery還提供一種方法 hasClass("className")，用來(lái)判斷某個(gè)元素是否已經(jīng)被賦予某個(gè)CSS類。
您可能感興趣的文章:
相關(guān)文章
jquery實(shí)現(xiàn)商品sku多屬性選擇功能（商品詳情頁(yè)）
這篇文章主要介紹了jquery實(shí)現(xiàn)商品sku多屬性選擇功能（商品詳情頁(yè)）,文中簡(jiǎn)單給大家介紹了sku的概念，需要的朋友可以參考下2019-12-12
jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法
這篇文章主要介紹了jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法,涉及jQuery Ajax調(diào)用及返回函數(shù)中增加js文件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
本代碼將實(shí)現(xiàn)以下樣式及功能：日歷標(biāo)題背景色、日歷標(biāo)題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈2013-04-04
如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實(shí)戰(zhàn)篇》中，我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動(dòng)態(tài)加載的JavaScript按照引入順序執(zhí)行。2011-03-03
jquery簡(jiǎn)單實(shí)現(xiàn)外部鏈接用新窗口打開(kāi)的方法
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)外部鏈接用新窗口打開(kāi)的方法,涉及jQuery正則匹配http://開(kāi)頭外部鏈接網(wǎng)址的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JQuery給網(wǎng)頁(yè)更換皮膚的方法,用到了jQuery頁(yè)面元素獲取、樣式及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery Pagination分頁(yè)插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery Pagination分頁(yè)插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
這篇文章主要介紹了jQuery給動(dòng)態(tài)添加的元素綁定事件的方法,對(duì)比了jQuery中事件綁定的方法以及常見(jiàn)版本使用綁定的區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
表頭是浮動(dòng)的，因?yàn)閮?nèi)容在同一頁(yè)面展示，當(dāng)滾動(dòng)時(shí)，看不到列頭，為了改動(dòng)少只能使用jquery原生態(tài)實(shí)現(xiàn)滾動(dòng)2014-03-03
jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航
這篇文章主要介紹了jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07