新しいスタイル実装メソッドを現在のスタイル シートに挿入する_javascript スキル

現在、ページ スタイルの問題を一時的に解決するために、これらのページはすべて、スタイル シートに直接挿入する必要があります。このパブリック JS のルール。

最初にコードを見てください:

コードをコピーします コードは次のとおりです:

/* *
* スタイルシート ルールをドキュメントに追加します (ただし、
* によりクラスを動的に変更する方が良い場合があります。これにより、スタイル情報を
* 本物のスタイルシートに保持できます (DOM への余分な要素の追加を避けることができます) ))
* ECMAScript では
* オブジェクトの反復順序を予測できず、CSS は
* 順序に依存している (つまり、カスケードしている) ため、宣言とルールには配列が必要であることに注意してください。
* カスケード ルールを必要としないものは、よりアクセサーに適したオブジェクトベースの API を構築できます。
* @param {Array} decls JSON エンコードされた宣言の配列を受け入れます
* @example
addStylesheetRules([
['h2', // 2 番目の引数を配列の配列としても受け入れます)代わりに
['color', 'red'],
['background-color', 'green', true] // !重要なルールの場合は 'true'
],
['。 myClass',
['background-color', ' yellow']
]
]);
*/
function addStylesheetRules (decls) {
var style = document.createElement('style');
document.getElementsByTagName('head'); .appendChild(style);
if (!window.createPopup) { /* 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] 、セレクター = decl[0 ]、rulesStr = '';
if (Object.prototype.toString.call(decl[1][0]) === '[オブジェクト配列]') {
decl = decl[1];
j = 0;
}
for (var rl=decl.length; j var ルール = decl[j]; rulesStr = ルール[0] ':' ルール[1] (ルール[2] ? ' !重要' : '') ';n';
}
if (s.insertRule) {
s .insertRule(selector '{ ' rulesStr '}', s.cssRules.length);
}
else { /* IE */
s.addRule(selector, rulesStr, -1); >}
}
}

コードをコピー コードは次のとおりです: addStylesheetRules( ["div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"] ])

実行後、追加のスタイルがあります

コードをコピー コードは次のとおりです: <style>

div.content{color:#000;border:1px Solid}

</style


新しいスタイルを挿入するので、一度呼び出して複数のルールを挿入することをお勧めします

コードをコピーします コードは次のとおりです: addStylesheetRules(

[selector, [attr, value], …],

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



主に 2 つのメソッドを使用します

:
標準メソッド: stylesheet.insertRule(rule,index) rule: 挿入されたルールなどdiv.content{color:#000} index として: 挿入順序。順序はスタイルに影響します。 0
firefox、chrome、opera、safri、ie では、ie9
ie の stylesheet.addRule (selector, styleDef [,positionIndex]):
selector: など、このメソッドもサポートされています。
styleDef: color:#000 など
positionIndex: デフォルト -1、最後に挿入
つまり、safari、および chrome はこのメソッドをサポートしています