如何用js在DOM中添加/删除class命名

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ padding:0; margin:0;}
#div1{ 910px; border:1px solid #000; overflow:hidden; height:200px; padding:20px 0; position:relative}
#div1 .active{ background:#FF0; border:1px solid #000; }
#div1 div{ border:1px solid #F00; 200px; height:200px; float:left; margin:0 10px; }
#div1 .list{ position:absolute; top:0; margin-left:0;}
#div1 .list1{ position:absolute; top:20px; left:20px;}
#div1 .list2{ position:absolute; top:20px; left:240px;}
#div1 .list3{ position:absolute; top:20px;left:460px;}
#div1 .list4{ position:absolute; top:20px; left:680px;}

</style>
<script>
window.onload=function(){
  var oDiv1=document.getElementById('div1');
  var oBtn=oDiv1.getElementsByTagName('div');
  for(var i=0; i<oBtn.length; i++){
	  oBtn[i].onmouseover=function(){
		  for(var i=0; i<oBtn.length;i++){
			  var classVal = oBtn[i].getAttribute("class");
		       classVal = " " + classVal + " ";
		       classVal = classVal .replace(" active ","");
              oBtn[i].setAttribute("class",classVal );     
		  }
		   var classVal = this.getAttribute("class");
		    classVal = " " + classVal + " ";
		   classVal = classVal.concat(" active");
		   this.setAttribute("class",classVal );s
	      } 
   };

}
</script>
</head>

<body>
<div id="div1">
   <div class="list list1"></div>
   <div class="list list2"></div>
   <div class="list list3"></div>
   <div class="list list4"></div>
</div>
</body>
</html>

 以上代码就可以

借此机会,介绍一下replace和concat的用法

replace定义和用法

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

stringObject.replace(regexp/substr,replacement)

http://www.w3school.com.cn/jsref/jsref_replace.asp

concat定义和用法

concat() 方法用于连接两个或多个数组。

<html>
<body>

<script type="text/javascript">

var a = [1,2,3];
document.write(a.concat(4,5));

</script>

</body>
</html>

 结果是1,2,3,4,5

原文地址:https://www.cnblogs.com/dabingguai/p/4813876.html