当通过style属性来修改元素的样式的时候,每修改一个样式,浏览器就需要重新渲染一次页面,这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便。因此我们可以采用通过JS的类的操作来进行修改。这样性能比较好,并且这种方式,可以使表现和行为进一步的分离。
一:向其中添加一个class属性值
参数:
obj 要添加class属性的元素
cn 要添加的class值
function addClass(obj , cn){
//检查obj中是否含有cn
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
二:判断一个元素是否含有class属性
判断一个元素中是否含有指定的class属性值
如果有该class,则返回true,没有则返回false
function hasClass(obj , cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
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 , "");
}
四:二级菜单伸缩的功能类
toggleClass可以用来切换一个类
如果元素中具有该类,则删除
如果元素中没有该类,则添加
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有,则删除
removeClass(obj , cn);
}else{
//没有,则添加
addClass(obj , cn);
}
}