CSS pour le contenu dynamique

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

  •  05-07-2019
  •  | 
  •  

Question

Je travaille sur l'ajout de contenu à une page Web avec JavaScript. Le problème est que le CSS dans IE (7) ne semble pas s’appliquer au contenu ajouté dynamiquement.

Voici un exemple de document. 

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

Dans FF, le style "Nouveau contenu" a été ajouté au nouveau paragraphe, mais pas dans IE. Cela semble assez évident pour pouvoir être facilement recherché, mais certaines questions évidentes ne m'ont donné rien.

Alors, quel est le truc?

Était-ce utile?

La solution

Pourquoi ne pas utiliser un cadre tel que jQuery , MooTools , extJs , Dojo , Prototype , etc., qui a déjà résolu tous les problèmes de ces problèmes?

Mais si vous insistez pour le faire vous-même, essayez d'utiliser: 

    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);
    };
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top