JavaScript学习（十五）——类的使用

我们在JS中修改CSS样式的时候是使用syle属性来修改元素的样式，但是每修改一个样式，浏览器就会重新渲染一次页面，这样程序执行的性能是比较差的，而且这种形式当我们需要修改多个样式的时候也不方便，CSS和JS代码耦合在一起也不方便维护程序。

我们可以使用元素的className属性来同时修改多个样式

元素对象.className="样式名称";

这种方法可以修改一次同时修改多个样式，并且浏览器只需要重新渲染页面一次，性能比较好，并且这种方式可以进一步的使行为与表现分离。

如果想要添加样式的话（记住样式名称前面的空格十分重要，否则添加上去之后两个样式名称重合在一起）

元素对象.className+=" 样式名称";

我们可以定义一个函数用来向一个元素中添加指定的class属性值

第一个参数obj表示的使要添加class属性的元素，第二个参数cn是要添加的class值

    
function addClass(obj,cn){
    if(!hashCode(obj,cn)){
        obj.className+=" "+cn;
    }
}

由于我们定义的函数调用一次就会添加一次属性，所以我们还需要定义一个函数来检测添加的属性是否已经添加给过目标元素对象

funtion hashClass(obj,cn){
    //var reg=/\bclass属性名\b/;// \b 确保属性名是独立的
    var reg=new RegExp("\\b"+cn+"\\b");//这样写是为了防止像上面一样把匹配的属性写死
    return reg.test(obj.className);
}

定义一个删除属性的函数

   function remove(obj,cn){
        var reg=new RegExp("\\b"+cn+"\\b");
        obj.className=obj.className.replace(reg,"");
    }

定义一个切换类的函数，如果元素中具有该类，则删除，如果元素中没有该类，则添加

 function toggleClass(obj,cn){
     if(hashCode(obj,cn)){
         removeClass(obj,cn);
     }else{
         addClass(obj,cn);
     }
 }