1

私は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では適用されません。これは、簡単に検索できるはずの十分に明白なもののように見えますが、いくつかの明白なクエリでは何も得られませんでした。

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

4

1 に答える 1

9

jQuery、MooTools、extJs、Dojo、Prototypeなど、これらの問題をすべて解決したフレームワークを使用してみませんか？

ただし、自分で行うことを主張する場合は、次を使用してみてください。

    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);
    };
于 2009-03-09T01:08:31.793 に答える