总结:js中4类修改样式的方法

#前言

最近在写一个扩展右键菜单的插件，既然是插件，想着一步到位，把相关的style样式设置都丢进js文件中，直接加载一个js文件便可以使用该插件，所以今天就研究了下js批量的插入样式的方法，即addSheet，顺便总结下Javascript中修改样式的4类方法

#正文

1、通过js动态的创建style对象

直接贴代码更为方便，这是addCssRule方法，可以一条一条规则的添加到样式表中

var addCssRule = (function  {

    //该方法因为引用了闭包，无论如何都会创建style对象，所以不能做插件使用，需要自己手动修改，目前未进行修改
    var createSheet = function  {
        var style = document.createElement("style");
        document.head.appendChild(style);
        //后面写法是为了兼容ie8以下
        return style.sheet||style.styleSheet;
    };

    var sheet = createSheet;

    return function(selector,rules,index){
        var index=index||0;
        if(sheet.insertRules){
 sheet.insertRules(selector+"{"+rules+"}",index);
        }else{
 sheet.addRule(selector,rules,index);
        }
    }

});

该方法的思路就是，通过创建style，并把style添加到head上，然后返回style的sheet对象，利用sheet对象的insertRule(主流)，或者addRule(ie8以下)方法，把样式添加到新建的样式表中。当然，此方法也可以改写成添加到已有的样式表中，而无须另行的创建新的样式表。

上面的方法是手动的每条规则添加一次，而我目前的需求是批量的添加样式，所以需要另寻它法。

下面的这个是addSheet方法

var addSheet=function(styleStr){

    var styleElements=document.getElementsByTagName("style");
    if(styleElements.length==0){
        if(document.createStyleSheet){
 //说明是ie8，注意，ie8的style通过js创建的话必须使用该方法创建
 //如果不使用该方法创建，那么通过createElement("style")方法创建的style对象在ie8下，没有对应的cssText方法
 document.createStyleSheet;
 //通过该方法创建，会自动添加到head中
        }else{
 //现代浏览器直接使用createElement
 var styleE=document.createElement("style");
 document.head.appendChild(styleE);
        }
    }

    //styleElements是类数组，会自动更新
    var styleElement=styleElements[0];

    if(styleElement.styleSheet){
        //说明ie8
        styleElement.styleSheet.cssText+=styleStr;
    }else{
        var textNode = document.createTextNode(styleStr);
        styleElement.appendChild(textNode);
    }

};

使用实例

addSheet('.dialog{\
        width:600px;\
        margin:30px auto;\
        background-color: #fff;\
        box-shadow: 0 3px 9px rgba(0,0,0,0.5);\
        font-family: Arial, sans-serif;\
        font-size: 13px;\
        line-height: 1.4;\
}')

addSheet方法可以批量的插入大量的样式，但是目前的缺点是，由于换行造成了不足，需要手动的在后面加上\解决，所以在实际开发中如果想使用该方法，可以通过网上的工具，把样式进行空格压缩之后作为参数传进来。目前打算是自己写一个node程序撸掉它。

2、使用行内样式

这个方法应该是我们最为熟悉的了，介绍不多

oDiv.style.color="#fff";
oDiv.style.fontSize="14px";

3、使用cssText（注意）

oDiv.style.cssText="color:#fff;font-size:14px;";

在使用该方法时，注意两点，cssText属性会覆盖原来的行内样式，即

<div style="width:100px;"></div>

在使用了

oDiv.style.cssText="color:#fff;font-size:14px;";

之后，原本的样式会被覆盖，变成

<div style="color:#fff;font-size:14px;"></div>

所以，一般我们为了避免行内样式被覆盖，都会这样使用

oDiv.style.cssText+="color:#fff;font-size:14px;";

这样原本的行内样式就不会被覆盖

<div style="width:100px;color:#fff;font-size:14px;"></div>

但是，在ie8之下，却存在一个奇葩的问题

<div style="width:100px;"></div>
console.log(oDiv.style.cssText);

输出结果是这样的width:100px，如果足够细心你会发现，此处的;被剔除了，所以一旦在ie8以下这样使用cssText则会由于分号的原因出现问题

oDiv.style.cssText+="color:#fff;font-size:14px;";

所以为了在ie8以下正常使用需要写个方法加上分号，具体方法这里不写了，后面的参考博客会给出

4、修改class

总共有4类方法修改样式，其他小的不计在这里，最后的一个方法就是通过修改元素的className来实现，这里也给出几个与class相关的参考方法

getClass方法

var getClass=function(ele){
        //使用trim方法格式化一次，防止 red blue yellow 这样的情况
        //这里的trim方法不可以去除
        ele.className=ele.className.trim;
        return ele.className.replace(/\s+/g," ").split(" ");
};

hasClass方法

var hasClass=function(ele,cls){
        //下面的这行代码是错误的，由于使用的正则匹配中，需要传参匹配，所以无法使用字面量的正则表达式，因为字面量的正则无法传参，只能用于常量，所以此处需要使用构造函数创建正则
        //var reg=/\b+cls+\b/g;
        //注意此处的\b变成了\\b，因为要进行双重转义，所以原本的元字符\b都要变成\\b这样的形式
        //这里的trim方法可以去除
        var cls=cls.trim;
        var reg=new RegExp("\\b"+cls+"\\b");
        return reg.test(ele.className);
};

addClass方法

var addClass=function(ele,cls){
        if(!hasClass(ele,cls)) {
 //这里的trim方法可以去除
 var cls=cls.trim;
 ele.className += " " + cls;
        }
};

removeClass方法

var removeClass=function(ele,cls){
        if(hasClass(ele,cls)){
 //这里的trim方法可以去除
 var cls=cls.trim;
 var reg=new RegExp("\\b"+cls+"\\b");
 return ele.className=ele.className.replace(reg,"")
        }
};

剩下的这个replaceClass方法懒得写了

var replaceClass=function(ele,nCls,oCls){

};  

上述的代码片段都是看了其他大牛博主，然后自己偷懒少写了一部分功能实现的，所以如果想要在实际开发中使用上面的方法请看下面的参考链接拿到源码，毕竟我上面的那些都是为了测试而写的，不完整。

参考链接