1

ノードを DOM に挿入するstyleのは些細なことのように思えますが、私はそれを行うための多くの矛盾した方法を見つけました。だから私はそれをstackoverflowで調べることにしました.多くの投稿が私が必要とすることを行う方法論を提供しているようですが、それらは必ずしも互いに同意するとは限りません.

次のJavaScriptメソッドに出くわしました：

スタイル要素を返しますが、古いブラウザには「styleSheet」プロパティがないようです。

document.createElement("style")

styleSheet オブジェクトを返しますが、後でスタイル要素 (DOM に挿入する必要があります) にアクセスする方法はわかりません。

document.createStyleElement()

以下の最初の 3 つのメソッドはスタイル シートで動作し、その他はスタイル ノードで直接動作する「ハック」です。

styleSheet.cssText
styleSheet.addRule
styleSheet.insertRule
style.createTextNode
style.innerHTML

また、(少なくとも) 最初の 3 つの styleSheet メソッドで使用する正しい構文を見つけるのにも苦労しました。たとえば、中括弧とセミコロンを含めることが必須かどうか。

また、これらのプロパティは、さまざまなブラウザーでスタイルシートにアクセスするために使用されます。

document.styleSheets[index]
element.styleSheet
element.sheet

スタイル要素を挿入するクロス ブラウザ アプローチに使用するメソッドの正しいバンドルは何でしょうか? これは、IE6 などの古いブラウザー、サブセレクター ( など:visited)、および!importantステートメントをカバーする必要があります。

4

3 に答える 3

1

この質問から処理:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';

if (style.styleSheet)
    style.styleSheet.cssText = css;
else
    style.appendChild(document.createTextNode(css));

head.appendChild(style);

IE 7-9、Firefox、Opera、Chrome でテスト済みとのことで、かなり互換性があります。

そして、ここに役立つかもしれない2つのリンクがあります：

動的スタイル - JavaScript による CSS の操作 - W3C Wiki
W3C DOM 互換性 - CSS

于 2013-07-09T21:09:41.383 に答える
0

このようなことを意味しますか？これはクロスブラウザである必要があります。

HTML

<div id="target">text</div>

Javascript

function injectStyle(data, attributes, inBody) {
    attributes = attributes || {};
    inBody = inBody || false;

    var inject = document.createElement("style"),
        i;

    inject.type = "text/css";
    for (i in attributes) {
        if (attributes.hasOwnProperty(i)) {
            inject[i] = attributes[i];
        }
    }

    inject.appendChild(document.createTextNode(data));
    if (inBody) {
        return document.body.appendChild(inject);
    }

    return (document.head || document.getElementsByTagName("head")[0] || document.documentElement).appendChild(inject);
}

injectStyle("#target { border-style: solid; border-width: 5px; }", {
    id: "injectedStyle"
});

jsfiddleで

于 2013-07-09T21:09:45.450 に答える