css para contenido dinámico

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

  •  05-07-2019
  •  | 
  •  

Pregunta

Estoy trabajando en agregar contenido a una página web con javascript. El problema es que el CSS en IE (7) no parece aplicarse al contenido agregado dinámicamente.

Aquí hay un documento de ejemplo ... 

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

En FF, el párrafo 'Nuevo contenido' recién agregado tiene el estilo aplicado, pero en IE no. Esto parece algo bastante obvio que debería ser fácil de buscar, pero algunas consultas obvias no me dieron nada.

Entonces, ¿cuál es el truco?

¿Fue útil?

Solución

¿Por qué no usar un marco, como jQuery , MooTools , extJs , Dojo , Prototipo , etc., que ya ha resuelto todo de estos problemas?

Pero si usted insiste en hacerlo usted mismo, intente 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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top