CSS für dynamische Inhalte

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

  •  05-07-2019
  •  | 
  •  

Frage

Ich arbeite Inhalt einer Web-Seite mit Javascript hinzufügen. Das Problem ist, dass der CSS im IE (7) scheint nicht zu dem dynamisch hinzugefügter Inhalt anwenden.

Hier ist ein Beispiel-Dokument .. 

<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>

In FF, die neu hinzugefügte ‚neue Inhalte‘ Absatz hat den Stil angewendet, aber in IE, es funktioniert nicht. Dies scheint wie etwas offensichtlich genug, dass es sollte leicht durchsuchbaren-sein, aber einige offensichtliche Anfragen gab mir nichts.

Also, was ist der Trick?

War es hilfreich?

Lösung

Warum nicht einen Rahmen, wie jQuery , MooTools , ExtJS , Dojo , Prototype usw., die bereits alle ist gelöst diese Probleme?

Aber wenn Sie darauf bestehen, es selbst zu tun, versuchen Sie es mit: 

    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);
    };
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top