css para conteúdo dinâmico

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

  •  05-07-2019
  •  | 
  •  

Pergunta

Eu estou trabalhando para adicionar conteúdo a uma página da web com javascript. O problema é que a CSS no IE (7) não parece aplicar-se ao conteúdo adicionado dinamicamente.

Aqui está um exemplo de documento .. 

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

Em FF, o 'New Content' parágrafo recém-adicionado tem o estilo aplicado a ele, mas no IE, isso não acontece. Este parece ser algo bastante óbvio que deveria ser facilmente pesquisável-para, mas algumas consultas óbvias não me deu nada.

Então, qual é o truque?

Foi útil?

Solução

Por que não usar um quadro, como jQuery , MooTools , ExtJS , Dojo , Prototype , etc., que já resolveu todos destes problemas?

Mas se você insistir em fazê-lo sozinho, tente usar: 

    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);
    };
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top