JavaScript中class如何調用

這篇文章將為大家詳細講解有關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|$)'),' ');
 }
}

關于“JavaScript中class如何調用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。