javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2016年07月20日 10:34:03 投稿：jingxian

下面小編就為大家?guī)硪黄猨avaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)

<html>
　　<head>

　　　　<style type="text/css">

　　　　　　.div2{

　　　　　　font-size:16px;　

　　　　　　color:orange;

　　　　　　}

　　　　　　.div3{

　　　　　　font-size:20px;

　　　　　　color:blue;

　　　　　　}

　　　　<style>

　　　　<script type="text/javascript">

　　　　　　[1]直接把樣式賦值給className

　　　　　　var odiv=document.getElementById('div1');

　　　　　　odiv.className= div3

　　　　　　//這樣我們會(huì)得到 class ="div3" 會(huì)直接把div2樣式給覆蓋掉;

　　　　　　[2]使用累加賦值給className

　　　　　　var odiv=document.getElementById('div1');

　　　　　　odiv.className+=" "+div3  　　//樣式和樣式之間需要空隙 ，所以加個(gè)空字符串隔開

　　　　　　//這樣可以得到 class="div2 div3" 可以正常增加，但是我們?cè)谔砑訕邮降臅r(shí)候我們得考慮下他本身之前有沒有同名的樣式，如果有我們添加的話就會(huì)變成累贅 比如class="div2 div3 div3";

　　　　　　[3]檢測(cè)樣式原先之前是否有相同的樣式

　　　　　　var odiv=document.getElementById('div1');　

　　　　　　function hasClass(element,csName){

　　　　　　　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測(cè)是否有相同的樣式

 

　　　　}　　

　　　　　　[4]在[3]的基礎(chǔ)上我們就可以進(jìn)行判斷性給元素添加樣式了　　　　　

　　　　　　var odiv=document.getElementById('div1');　

　　　　　　function hasClass(element,csName){

　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測(cè)是否有相同的樣式

　　　　}　

　　　　　　function addClass(element,csName){

　　　　　　　if(!hasClass(element,csName)){

　　　　　　　　　element.className+=' '+csName;

　　　　　　}

　　　　addClass(odiv,'div3');

　　　　//這樣就可以靈活給元素添加樣式了;

　　　　【元素刪除指定樣式】

　　//同樣先進(jìn)行判斷，在進(jìn)行刪除

　　

　　　　　var odiv=document.getElementById('div1');　

　　　　　function hasClass(element,csName){

　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測(cè)是否有相同的樣式

　　　　}　

　　　　　function deleteClass(element,csName){

　　　　　　　if(!hasClass(element,csName)){

　　　　　　　　　element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' ');  //利用正則捕獲到要?jiǎng)h除的樣式的名稱，然后把他替換成一個(gè)空白字符串，就相當(dāng)于刪除了

　　　　　}


　deleteClass(odiv,div3);
 

　　}

　　　　</script>

　　</head>

　　<body>

　　　　<div id="div1" class='div2'> 測(cè)試</div>

　　</body>

</html>

以上這篇javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: