•  05-07-2019
  •  | 
  •  

题

我正在尝试使用javascript向网页添加内容。问题是IE（7）中的CSS似乎不适用于动态添加的内容。

这是一个示例文档.. 

<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 ， MooTools ， extJs ， Dojo ， Prototype 等，已经解决了所有问题这些问题？

但如果您坚持自己动手，请尝试使用：

    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