快捷導(dǎo)航

向當(dāng)前style sheet中插入一個(gè)新的style實(shí)現(xiàn)方法

更新時(shí)間：2013年04月01日 09:22:35 作者：

今天為了臨時(shí)解決頁(yè)面樣式問(wèn)題，為了方便，直接在這個(gè)公共的js里面向style sheet插入新的style rule，感興趣的朋友可以出納卡下哈

很少會(huì)插入一個(gè)新的style rule，今天為了臨時(shí)解決頁(yè)面樣式問(wèn)題，需要更新很多頁(yè)面的一些樣式，這些頁(yè)面都引用了一個(gè)公共的js，為了方便，直接在這個(gè)公共的js里面向style sheet插入新的style rule。

先看代碼：

復(fù)制代碼代碼如下:

 
/** 
* Add a stylesheet rule to the document (may be better practice, however, 
* to dynamically change classes, so style information can be kept in 
* genuine styesheets (and avoid adding extra elements to the DOM)) 
* Note that an array is needed for declarations and rules since ECMAScript does 
* not afford a predictable object iteration order and since CSS is 
* order-dependent (i.e., it is cascading); those without need of 
* cascading rules could build a more accessor-friendly object-based API. 
* @param {Array} decls Accepts an array of JSON-encoded declarations 
* @example 
addStylesheetRules([ 
['h2', // Also accepts a second argument as an array of arrays instead 
['color', 'red'], 
['background-color', 'green', true] // 'true' for !important rules 
], 
['.myClass', 
['background-color', 'yellow'] 
] 
]); 
*/ 
function addStylesheetRules (decls) { 
var style = document.createElement('style'); 
document.getElementsByTagName('head')[0].appendChild(style); 
if (!window.createPopup) { /* For Safari */ 
style.appendChild(document.createTextNode('')); 
} 
var s = document.styleSheets[document.styleSheets.length - 1]; 
for (var i=0, dl = decls.length; i < dl; i++) { 
var j = 1, decl = decls[i], selector = decl[0], rulesStr = ''; 
if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') { 
decl = decl[1]; 
j = 0; 
} 
for (var rl=decl.length; j < rl; j++) { 
var rule = decl[j]; 
rulesStr += rule[0] + ':' + rule[1] + (rule[2] ? ' !important' : '') + ';\n'; 
} 
if (s.insertRule) { 
s.insertRule(selector + '{' + rulesStr + '}', s.cssRules.length); 
} 
else { /* IE */ 
s.addRule(selector, rulesStr, -1); 
} 
} 
} 

復(fù)制代碼代碼如下:

 
addStylesheetRules(["div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"]]) 

執(zhí)行后當(dāng)前document的head標(biāo)簽內(nèi)，多了一個(gè)style

復(fù)制代碼代碼如下:

 
<style> 
div.content{color:#000;border:1px solid} 
</style 

知道怎么調(diào)用了吧，每次調(diào)用都會(huì)插入一個(gè)新的style，所以最好調(diào)用一次，插入多個(gè)rule

復(fù)制代碼代碼如下:

 
addStylesheetRules( 
[selector, [attr, value], …], 
[selector, [attr, value], …] 
); 

主要用到兩個(gè)方法：
標(biāo)準(zhǔn)方法：stylesheet.insertRule(rule, index)
rule：被插入的rule，如 div.content{color:#000}
index: 插入順序，先后順序會(huì)影響樣式的。從0開始
firefox、chrome、opera、safri、ie從ie9開始也支持這個(gè)方法
ie的stylesheet.addRule (selector, styleDef [, positionIndex]);
selector：如div.content
styleDef：如color:#000
positionIndex：默認(rèn)-1，插入到末尾
ie、safari、chrome支持這個(gè)方法

您可能感興趣的文章: