<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b1{
width: 200px;
height: 200px;
background-color: red;
}
.b2{
width: 400px;
height: 400px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box1 = document.getElementById("box1");
var btn = document.getElementById("btn");
btn.onclick=function(){
//修改box的样式
/*
* 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
* 这样的执行是比较差的，而且这种形式当我们要修改多个样式，也不太方便
*/
// box1.style.width="200px";
// box1.style.height="200px";
// box1.style.backgroundColor="yellow";
//我希望一行代码可以修改多个样式
//修改box1的class属性
/*
* 我们可以通过修改元素的class属性来间接修改样式
* 只修改一次，即可同时修改多个，性能性也好
*/
// box1.className+=" b2"; //在原有基础上增加
// addClass(box1,"b2");
// alert(hasClass(box1,"b2"));
// removeClass(box1,"b2");
toggleClass(box1,"b2");
}
/*
* 定义一个函数，用来向一个元素中添加指定的class属性值
* 参数：
* obj 要添加class属性元素
* cn 要增加的class值
*/
function addClass(obj,cn){
if(!hasClass(obj,cn)){
obj.className +=" "+cn;
}
}
/*
* 判断一个元素中是否含有class属性
* 如果有该class,则返回true，没有则返回false
*
*/
function hasClass(obj,cn){
//判断obj中有没有cn class
// var reg =/\bb2\b/; // \b单词边界
var reg = new RegExp("\\b"+cn+"\\b");
// alert(reg)
return reg.test(obj.className);
}
function removeClass(obj,cn){
var reg = new RegExp("\\b"+cn+"\\b");
obj.className=obj.className.replace(reg,"");
}
//先判断，如果有删除 没有增加
function toggleClass(obj,cn){
if(hasClass(obj,cn)){
removeClass(obj,cn);
}else{
addClass(obj,cn);
}
}
}
</script>
</head>
<body>
<button id="btn">点击按钮，改变box的样式</button>
<br />
<br />
<div id="box1" class="b1"></div>
</body>
</html>