總結：js中4類修改樣式的方法

前言

最近在寫一個擴展右鍵菜單的插件，既然是插件，想着一步到位，把相關的style樣式設置都丟進js文件中，直接加載一個js文件即可以使用該插件，因此今天就研究了下js批量的插入樣式的方法，即addSheet()，順便總結下Javascript中修改樣式的4類方法

正文

一、經過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程序擼掉它。

---

二、使用行內樣式

這個方法應該是咱們最爲熟悉的了，介紹很少

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

---

三、使用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如下正常使用須要寫個方法加上分號，具體方法這裏不寫了，後面的參考博客會給出

---

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