css per contenuti dinamici

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

  •  05-07-2019
  •  | 
  •  

Domanda

Sto lavorando per aggiungere contenuti a una pagina Web con JavaScript. Il problema è che il CSS in IE (7) non sembra applicarsi al contenuto aggiunto dinamicamente.

Ecco un documento di esempio .. 

<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, il paragrafo "Nuovo contenuto" appena aggiunto ha lo stile applicato, ma in IE non lo è. Sembra qualcosa di abbastanza ovvio da dover essere facilmente ricercabile, ma alcune ovvie domande non mi hanno dato nulla.

Quindi qual è il trucco?

È stato utile?

Soluzione

Perché non utilizzare un framework, come jQuery , MooTools , extJs , Dojo , Prototype , ecc., che ha già risolto tutto di questi problemi?

Ma se insisti a farlo da solo, prova a usare: 

    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);
    };
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top