動的コンテンツのCSS

StackOverflow https://stackoverflow.com/questions/624651

  •  05-07-2019
  •  | 
  •  

質問

JavaScriptを使用してWebページにコンテンツを追加する作業をしています。問題は、IE（7）のCSSが動的に追加されたコンテンツに適用されないように見えることです。

これはドキュメントの例です。

<html>
<head>
    <style type="text/css">
    p.foo { color: #FF4400 ; background-color: #000000 }
    p.bar { color: #FF0000 ; background-color: #000000 }
    </style>
    <script type="text/javascript">
        function add() {
            var node = document.createElement("p");
            node.setAttribute("class", "bar");
            node.appendChild(document.createTextNode("New Content"));
            document.body.appendChild(node);
        };
    </script>
</head>
<body onload="add()">
        <p class="bar">bar</p>
        <p class="foo">foo</p>
</body>
</html>

FFでは、新しく追加された「新しいコンテンツ」段落にスタイルが適用されますが、IEではそうではありません。これは簡単に検索できるように十分に明白なもののように思えますが、いくつかの明白なクエリは私に何も与えませんでした。

では、トリックは何ですか？

役に立ちましたか？

解決

jQuery 、 MooTools 、 extJs 、 Dojo 、プロトタイプなど、すでにすべて解決済みこれらの問題の？

ただし、自分でやる場合は、次を使用してみてください：

    function add() {
        var node = document.createElement("p");
        node.className = 'bar'; // <- use in leu of setAttribute()
        node.appendChild(document.createTextNode("New Content"));
        document.body.appendChild(node);
    };
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top