js基础_86、类css的操作
样式与行为混合
通过style属性来修改元素的样式，每修改一个样式 ，浏览器就需要重新渲染一次页面 这样的执行的性能是比较差的，而且这种形式当我们要 修改多个样式时，也不太方便。 而且，css是样式，js是行为，这样的操作就是行为和表现混合了，在开发中尽量少用。
解决思路
我们可以通过修改元素的class属性来间接修改样式，这样一来，我们只需要修改一次，即可以同时修改元素的多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步分离。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload=function(){
var btn1=document.getElementById("btn1");
var box1=document.getElementById("box1");
btn1.onclick=function(){
/*
* 通过style属性来修改元素的样式，每修改一个样式 ，浏览器就需要重新渲染一次页面
* 这样的执行的性能是比较差的，而且这种形式当我们要 修改多个样式时，也不太方便。
* 而且，css是样式，js是行为，这样的操作就是行为和表现混合了，在开发中尽量少用。
*/
//box1.style.width=200+"px";
//box1.style.backgroundColor="yellow";
//addClass(box1,"b2");
//removeClass(box1,"b2");
toggleClass(box1,"b2");
}
};
function addClass(obj,cn){
if(!hasClass(obj,cn)){
obj.className+=" "+cn;
}
}
function hasClass(obj,cn){
var reg=new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
function removeClass(obj,cn){
var reg=new RegExp("\\b"+cn+"\\b");
obj.className=obj.className.replace(reg,"");
}
/*toggleClass
* 可以用来切换一个类
* 如果该元素中具有该类，则删除
* 如果元素中没有该类名，则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn)){
//有，则删除
removeClass(obj,cn);
}else{
//没有则添加
addClass(obj,cn);
}
}
</script>
</head>
<body>
<button id="btn1">点击修改样式</button>
<br /><br />
<div id="box1" class="b1 b2"></div>
</body>
</html>
