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

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

  •  05-07-2019
  •  | 
  •  

Вопрос

Я работаю над добавлением контента на веб-страницу с помощью 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 это не так.Это кажется чем-то достаточно очевидным, что должно быть легко доступно для поиска, но некоторые очевидные запросы ничего мне не дали.

Так в чем же фокус?

Это было полезно?

Решение

Почему бы не использовать фреймворк, такой как jQuery, Инструменты для переговоров, ExtJS, Додзе, Прототип, и т.д., которые уже решили все эти проблемы?

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

    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);
    };
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top