CSS для динамического контента - PullRequest
Новая
       3

CSS для динамического контента

1 голос
/ 09 марта 2009

Я работаю над добавлением контента на веб-страницу с помощью JavaScript. Проблема в том, что CSS в IE (7) не относится к динамически добавляемому контенту.

Вот пример документа .. 

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

В FF к новому добавленному абзацу «Новое содержимое» применяется стиль, но в IE это не так. Это кажется чем-то достаточно очевидным, чтобы его можно было легко найти, но некоторые очевидные запросы ничего мне не дали.

Так в чем же подвох?

1 Ответ

9 голосов
/ 09 марта 2009

Почему бы не использовать фреймворк, такой как jQuery , MooTools , extJs , Dojo , Прототип и т.д., что уже решило все эти проблемы?

Но если вы настаиваете на том, чтобы сделать это самостоятельно, попробуйте использовать: 

    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);
    };
...