如何用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{ width: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; width: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
