js移除和新增class樣式類簡單介紹

admin發表於2017-04-15
原文網址 : https://www.softwhy.com/article-7155-1.html
JS

本章節分享一段程式碼例項，它實現了利用原生javascript刪除或者新增指定樣式類的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
#antzone{
  width:200px;
  height:100px;
  background:#ccc;
  text-align:center;
  line-height:100px;
}
.color{
  color:red;
}
</style>
<script type="text/javascript">
function hasClass(obj, cls) {  
  return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
}  
   
function addClass(obj, cls) {  
  if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
}  
   
function removeClass(obj, cls) {  
  if (hasClass(obj, cls)) {  
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
    obj.className = obj.className.replace(reg, ' ');  
  }  
}  
window.onload=function(){
  var oAdd=document.getElementById("add");
  var oDel=document.getElementById("del");
  var odiv=document.getElementById("antzone");
   
  oAdd.onclick=function(){
    addClass(odiv,"color");
  }
  oDel.onclick=function(){
    removeClass(odiv,"color");
  }
}
</script>
<body>
<div id="antzone">螞蟻部落</div>
<input type="button" id="add" value="新增"/>
<input type="button" id="del" value="刪除"/>
</body>
</html>

上面的程式碼實現了新增和刪除功能，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.className可以參閱js className一章節。

（2）.match()可以參閱正規表示式match()函式一章節。

（3）.replace()可以參閱正規表示式replace()函式一章節。

相關文章