1.弊端
通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
* 这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便
2.于是乎解决一下,也降低css与js耦合度
修改box的class属性
* 我们可以通过修改元素的class属性来间接的修改样式
* 这样一来,我们只需要修改一次,即可同时修改多个样式,
* 浏览器只需要重新渲染页面一次,性能比较好,
* 并且这种方式,可以使表现和行为进一步的分离
box.className += " b2";
通过下面的代码只需要一行
addClass(box,"b2");
removeClass(box,"b2");
toggleClass(box,"b2");
3.封装
3.1 addClass
定义一个函数,用来向一个元素中添加指定的class属性值
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
function addClass(obj , cn){
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
3.2 hasClass
* 判断一个元素中是否含有指定的class属性值
* 如果有该class,则返回true,没有则返回false
function hasClass(obj , cn){
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
3.3 removeClass
* 删除一个元素中的指定的class属性
*/
function removeClass(obj , cn){
var reg = new RegExp("\\b"+cn+"\\b");
obj.className = obj.className.replace(reg , "");
}
3.4 toggleClass
* toggleClass可以用来切换一个类
* 如果元素中具有该类,则删除
* 如果元素中没有该类,则添加
*/
function toggleClass(obj , cn){
if(hasClass(obj , cn)){
removeClass(obj , cn);
}else{
addClass(obj , cn);
}
}