JavaScript中，關於class的調用

PS：class的調用，實際上是能夠疊加的，固然了這要求樣式不一樣的狀況下，若是樣式相同，則後一個樣式會覆蓋前一個樣式。

1.舉例以下:

<div id="test" class="aaa bbb">測試關於class的調用</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';//由於aaa和bbb的樣式相同，因此，bbb的樣式會覆蓋aaa的樣式

 因此最後‘測試關於class的調用’幾個字的樣式是：font-size:50px; color:green;

2.這樣的添加類方式很繁瑣，每次添加一個新的，我還要帶上以前寫的類，容易帶漏，而且還要檢查是否帶全，因此能夠編寫函數方法來解決添加類和刪除類的問題：

function hasClass(element,className){      //判斷是否存在類
       return element.className.match(new RegExp('(\\s|^)'+className+'(\s|$)'));

}
//添加一個Class
function addClass(element,className){
   if(!hasClass(element,className)){
          element.className+=' '+className;
    }   
}   
//刪除一個Class
function removeClass(element,className){
  if(hasClass(element,className)){
       element.className=element.className.replace
     (new RegExp('(\\s|^)'+className+'(\s|$)'),' ');
  }
}