js移除和添加class样式类简单介绍

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了利用原生javascript删除或者添加指定样式类的功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()函数一章节。

js移除和添加class样式类简单介绍,这样的场景在实际项目中还是用的比较多的,关于js移除和添加class样式类简单介绍就介绍到这了。

js移除和添加class样式类简单介绍属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容