jquery如何恢復(fù)原來(lái)的css樣式

這篇文章將為大家詳細(xì)講解有關(guān)jquery如何恢復(fù)原來(lái)的css樣式，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，它具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

在jquery中，可以使用“addClass()”方法恢復(fù)原來(lái)的樣式，語(yǔ)法格式為“$("元素名稱").addClcss("屬性名","屬性值")”；“addClass()”方法向被選元素添加一個(gè)或多個(gè)類，不會(huì)移除已存在的class屬性。

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.11.1版、Dell G3電腦。

新建一個(gè)html文件，命名為test.html，用于講解jquery怎么恢復(fù)默認(rèn)的css。

在test.html文件內(nèi)，使用div標(biāo)簽創(chuàng)建一個(gè)模塊，并設(shè)置div的class屬性為testdiv。

在css標(biāo)簽內(nèi)，定義一個(gè)testdiv類名的樣式，設(shè)置寬度為100px，高度為120px，背景顏色為黃色。

在test.html文件內(nèi)，使用button標(biāo)簽創(chuàng)建兩個(gè)按鈕，一個(gè)是“移除css”，“恢復(fù)css”。

在test.html文件內(nèi)，分別給兩個(gè)button按鈕綁定onclick()點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時(shí)，分別執(zhí)行delcss()函數(shù)，addcss()函數(shù)。

在js標(biāo)簽中，分別創(chuàng)建delcss()函數(shù)和addcss()函數(shù)，在delcss()函數(shù)內(nèi)，通過(guò)class(testdiv)獲得div對(duì)象，使用removeAttr()方法移除class，實(shí)現(xiàn)去除css樣式；在addcss()函數(shù)，通過(guò)元素名稱獲得div對(duì)象，使用addClass(）方法給div對(duì)象添加原來(lái)的class，從而實(shí)現(xiàn)恢復(fù)默認(rèn)的css。

在瀏覽器打開test.html文件，分別點(diǎn)擊按鈕，查看實(shí)現(xiàn)的效果。

關(guān)于“jquery如何恢復(fù)原來(lái)的css樣式”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。