<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1{
width: 100px;
height: 100px;
background-color: red;
}
.d2{
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<button id="btn">操作#d01</button>
<br /><br />
<div id="box" class="d1 d2">
</div>
</body>
<script type="text/javascript">
var btn=document.getElementById("btn");
var box=document.getElementById("box");
/*
* 通过class属性来间接的修改样式
* 这样我们只需要修改一次，提升性能，
*/
btn.onclick=function(){
// box.className="d2";
// box.className+=" d2";//在d1上增加d2样式，注意d2前面有空格
//addClass(box,"d2");
//removeClass(box,"d2");
toggleClass(box,"d2");
}
/*定一个函数来用来想一个元素中动态添加指定的class属性值
* -参数：
* obj 目标元素
* cn 要添加的class值
*/
function addClass(obj,cn){
//判断，防止cn有了还执行函数多次添加
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
}
/*判断一个元素中是否含有指定的class属性值
* 如果有，返回true
*/
function hasClass(obj,cn){
//判断obj中有没有cn class，正则表达式
var reg=new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*删除一个元素中的指定class属性值
*/
function removeClass(obj,cn){
//创建一个正则表达式
var reg=new RegExp("\\b"+cn+"\\b");
//删除跟正则式符合的class
obj.className=obj.className.replace(reg," ");
}
/*切换一个class
* 如果元素中有该class，则删除；没有，则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn)){
removeClass(obj,cn);
}else{
addClass(obj,cn);
}
}
</script>
</html>
