Question

我有一个ajax Web应用程序，将所有部分加载到单个页面中，例如index.html。在index.html中加载的内部部件超过32页（html，js，css）。

现在我遇到包含CSS文件或@import的问题。我以为我可以在客户端使用JS合并样式标记中的所有样式。问题是，IE不允许我使用JS更改页面顶部的样式标记。

有什么建议吗？

Here是我想在IE中做的事情的小提琴。它在其他标准浏览器中运行良好。

Answer 1

您可以将新样式表附加到<head>：

$('head').append('<style >body {background:red;}</style >');

或者您可以将样式与远程页面一起导入，它们根本不必在<head>。

Answer 2

这是一个愚蠢的IE错误，好吧

尝试在css文件中使用@import url("extra.css") all;

Answer 3

适用于IE 9和Chrome 22：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style id="styleTag" type="text/css">
        </style>
        <script type="text/javascript">
        window.onload = function()
        {
            // append a stylesheet to the page's head (optional)
            var el = document.createElement("link"); 

            el.type = "text/css"; 
            el.rel = "stylesheet"; 

            document.getElementsByTagName("HEAD")[0].appendChild(el);

            // get a reference to the newly added stylesheet
            var css = document.styleSheets[document.styleSheets.length - 1];

            // OR get a reference to an existing stylesheet
            // var css = document.styleSheets[0];

            // add rules to the stylesheet
            css.insertRule("body {background:red;}", css.cssRules.length);
        }
        </script>
    </head>
    <body>
        <h1>Hello, world.</h1>
    </body>
</html>

因此，您希望专注于引用样式对象，解析样式表的规则并使用insertRule添加它们。

如何在IE </style>中的<style>标记中追加css属性

3 个答案: