前言
最近在寫一個擴展右鍵菜單的插件，既然是插件，想着一步到位，把相關的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){
};
上述的代碼片段都是看了其他大牛博主，然后自己偷懶少寫了一部分功能實現的，所以如果想要在實際開發中使用上面的方法請看下面的參考鏈接拿到源碼，畢竟我上面的那些都是為了測試而寫的，不完整。
參考鏈接
司徒正美大神的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方法