jQuery 添加/移除CSS類實(shí)現(xiàn)代碼
更新時(shí)間：2010年02月11日 12:25:14 作者：
在網(wǎng)頁(yè)設(shè)計(jì)中，我們常常要使用Javascript來改變頁(yè)面元素的樣式。
其中一種辦法是改變頁(yè)面元素的CSS類(Class)，這在傳統(tǒng)的Javascript里，我們通常是通過處理HTML Dom的classname特性來實(shí)現(xiàn)的；而jQuery里提供三種方法來實(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類，然后通過Javascript事件觸發(fā)（比如點(diǎn)擊某個(gè)鏈接）來改變頁(yè)面元素樣式。此外，jQuery還提供一種方法 hasClass("className")，用來判斷某個(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類，然后通過Javascript事件觸發(fā)（比如點(diǎn)擊某個(gè)鏈接）來改變頁(yè)面元素樣式。此外，jQuery還提供一種方法 hasClass("className")，用來判斷某個(gè)元素是否已經(jīng)被賦予某個(gè)CSS類。
您可能感興趣的文章:
相關(guān)文章
再分享70+免費(fèi)的jquery 圖片滑塊效果插件和教程
這些jQuery插件同樣可以實(shí)現(xiàn)圖片和內(nèi)容的滑塊效果。下面的這些jQuery插件的Demo網(wǎng)站我都測(cè)試了一些，都可以正常訪問，我相信那么多款插件中總會(huì)有你喜歡的2014-12-12
本文給大家分享的是個(gè)人在使用jQuery的過程中總結(jié)的5點(diǎn)比較重要的知識(shí)點(diǎn)，這里推薦給小伙伴們，有需要的童鞋可以參考下。2015-05-05
Jquery 最近瀏覽過的商品的功能實(shí)現(xiàn)代碼
Jquery 最近瀏覽過的商品的功能實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-05-05
jquery實(shí)現(xiàn)簡(jiǎn)易的移動(dòng)端驗(yàn)證表單
本文給大家匯總介紹了幾個(gè)常用的jquery實(shí)現(xiàn)簡(jiǎn)易的移動(dòng)端驗(yàn)證表單，非常的實(shí)用，有需要的小伙伴可以進(jìn)來參考下。2015-11-11
有時(shí)候需要設(shè)置iframe的src屬性，下面是基于jquery的實(shí)現(xiàn)代碼。2010-11-11
這篇文章主要介紹了jquery多級(jí)樹形下拉菜單的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
jQuery 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
主要是利用了jquery的attr為行添加樣式來實(shí)現(xiàn)的，具體的代碼如下。2009-12-12
本篇文章介紹10款新鮮、有用的jQuery內(nèi)容導(dǎo)航插件，肯定是免費(fèi)的了，希望對(duì)你有幫助。2011-09-09
jquery?追加元素append、prepend、before、after用法與區(qū)別分析
在jquery中append、prepend、before、after方法是對(duì)數(shù)據(jù)元素節(jié)點(diǎn)的操作系列方法了，這些方法大家了解嗎？如果不了解就可以和小編來看看它們用法2016-12-12
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05