javaScript給元素添加多個class的簡單實現_javascript技巧

javaScript給元素添加多個class的簡單實現

<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　　　　　　//這樣我們會得到 class ="div3" 會直接把div2樣式給覆蓋掉;　　　　　　[2]使用累加賦值給className　　　　　　var odiv=document.getElementById('div1');　　　　　　odiv.className+=" "+div3  　　//樣式和樣式之間需要空隙 ，所以加個Null 字元串隔開　　　　　　//這樣可以得到 class="div2 div3" 可以正常增加，但是我們在添加樣式的時候我們得考慮下他本身之前有沒有同名的樣式，如果有我們添加的話就會變成累贅 比如class="div2 div3 div3";　　　　　　[3]檢測樣式原先之前是否有相同的樣式　　　　　　var odiv=document.getElementById('div1');　　　　　　　function hasClass(element,csName){　　　　　　　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式 　　　　}　　　　　　　　[4]在[3]的基礎上我們就可以進行判斷性給元素添加樣式了　　　　　　　　　　　var odiv=document.getElementById('div1');　　　　　　　function hasClass(element,csName){　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式　　　　}　　　　　　　function addClass(element,csName){　　　　　　　if(!hasClass(element,csName)){　　　　　　　　　element.className+=' '+csName;　　　　　　}　　　　addClass(odiv,'div3');　　　　//這樣就可以靈活給元素添加樣式了;　　　　【元素刪除指定樣式】　　//同樣先進行判斷，在進行刪除　　　　　　　var odiv=document.getElementById('div1');　　　　　　function hasClass(element,csName){　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式　　　　}　　　　　　function deleteClass(element,csName){　　　　　　　if(!hasClass(element,csName)){　　　　　　　　　element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' ');  //利用正則捕獲到要刪除的樣式的名稱，然後把他替換成一個空白字串，就相當於刪除了　　　　　}　deleteClass(odiv,div3); 　　}　　　　</script>　　</head>　　<body>　　　　<div id="div1" class='div2'> 測試</div>　　</body></html>

以上這篇javaScript給元素添加多個class的簡單實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。