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

时间 2019-12-10

原文原文链接

前言

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

正文

一、经过js动态的建立style对象

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

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如下)方法，把样式添加到新建的样式表中。固然，此方法也能够改写成添加到已有的样式表中，而无须另行的建立新的样式表。node

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

下面的这个是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程序撸掉它。ruby

二、使用行内样式

这个方法应该是咱们最为熟悉的了，介绍很少闭包

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

三、使用cssText（注意）

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

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

<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如下正常使用须要写个方法加上分号，具体方法这里不写了，后面的参考博客会给出

四、修改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){

};

上述的代码片断都是看了其余大牛博主，而后本身偷懒少写了一部分功能实现的，因此若是想要在实际开发中使用上面的方法请看下面的参考连接拿到源码，毕竟我上面的那些都是为了测试而写的，不完整。

参考连接

司徒正美大神的addSheet方法

http://www.cnblogs.com/rubylouvre/archive/2009/07/14/1523104.html

snandy大牛的关于cssText

http://www.cnblogs.com/snandy/archive/2011/03/12/1980444.html

snandy大牛的addCssRule方法

http://www.cnblogs.com/snandy/p/4867731.html