JavaScript中關(guān)于class的調(diào)用方法
更新時(shí)間：2017年11月28日 08:41:48 作者：winpin
下面小編就為大家?guī)?lái)一片JavaScript中關(guān)于class的調(diào)用方法。具有很好的參考價(jià)值，希望對(duì)大家有所幫助
PS：class的調(diào)用，其實(shí)是可以疊加的，當(dāng)然了這要求樣式不同的情況下，如果樣式相同，則后一個(gè)樣式會(huì)覆蓋前一個(gè)樣式。
1、舉例如下：
<div id="test" class="aaa bbb">測(cè)試關(guān)于class的調(diào)用</div>
.aaa{
font-size:20px;
color:red;
}
.bbb{
font-size:50px;
color:green;
}
var test=document.getElementById('test');
test.className='aaa';
test.className='aaa bbb';//因?yàn)閍aa和bbb的樣式相同，所以，bbb的樣式會(huì)覆蓋aaa的樣式
所以最后‘測(cè)試關(guān)于class的調(diào)用'幾個(gè)字的樣式是：font-size:50px; color:green;
2、這樣的添加類方式很繁瑣，每次添加一個(gè)新的，我還要帶上之前寫的類，容易帶漏，并且還要檢查是否帶全，所以可以編寫函數(shù)方法來(lái)解決添加類和刪除類的問(wèn)題：
function hasClass(element,className){ //判斷是否存在類
return element.className.match(new RegExp('(\\s|^)'+className+'(\s|$)'));
}
//添加一個(gè)Class
function addClass(element,className){
if(!hasClass(element,className)){
element.className+=' '+className;
}
}
//刪除一個(gè)Class
function removeClass(element,className){
if(hasClass(element,className)){
element.className=element.className.replace
(new RegExp('(\\s|^)'+className+'(\s|$)'),' ');
}
}
以上這篇JavaScript中關(guān)于class的調(diào)用方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript獲取統(tǒng)一管理的提示語(yǔ)(message)
這篇文章主要介紹了Javascript獲取統(tǒng)一管理的提示語(yǔ)(message)的相關(guān)資料,需要的朋友可以參考下2016-02-02
javascript 處理table表格的代碼，學(xué)習(xí)js的朋友可以參考下。2010-12-12
前端實(shí)現(xiàn)下載文件(包含壓縮包下載)方式詳細(xì)總結(jié)
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)下載文件(包含壓縮包下載)方式的相關(guān)資料,這段時(shí)間項(xiàng)目需要下載文件,所以這里給大家總結(jié)下,需要的朋友可以參考下2023-09-09
JS內(nèi)置對(duì)象和Math對(duì)象知識(shí)點(diǎn)詳解
在本篇文章里小編給大家分享的是關(guān)于JS內(nèi)置對(duì)象和Math對(duì)象知識(shí)點(diǎn)詳解內(nèi)容，有需要的朋友們可以參考下。2020-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)經(jīng)典貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景詳解
forEach是沒(méi)有返回值并且不直接改變?cè)瓟?shù)組的,今天發(fā)現(xiàn)是不能直接改變,下面這篇文章主要給大家介紹了關(guān)于Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景的相關(guān)資料,需要的朋友可以參考下2022-05-05
前端導(dǎo)出word文件的多種方式以及導(dǎo)出excel文件
導(dǎo)出功能是項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到的需求,在此就前端方面需要做的部分做一個(gè)總結(jié),這篇文章主要給大家介紹了關(guān)于前端導(dǎo)出word文件的多種方式以及導(dǎo)出excel文件的相關(guān)資料,需要的朋友可以參考下2024-08-08
JavaScript面向?qū)ο笾薪涌趯?shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript面向?qū)ο笾薪涌趯?shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蠼涌诘母拍?、?shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
這篇文章主要介紹了javascript隨機(jī)之洗牌算法深入分析,同時(shí)提供了一個(gè)完整實(shí)例,需要的朋友可以參考下2014-06-06
彈出框只彈一次，看到網(wǎng)上也就寫的很多，可以直接使用的沒(méi)有幾個(gè)，下面與大家分享個(gè)修改之后的代碼，需要的朋友可以參考下2013-11-11