Question

有我的代码来源：

            nodeCss = $('<link rel="stylesheet" href="about:blank" type="text/css" 

media="all" />');
                nodeCss.attr('href',css_file);
                $("head").append(nodeCss);

我在IE上有两个问题：

第一个是样式表第一次被忽略：我的页面允许我重新加载代码，当我这样做时，样式表不会被忽略。在插入由styleSheet定位的新元素之前，必须加载样式表。
第二个问题，所以第一个可以“被黑了”（因为只在IE上），它的动态样式表中的背景“url（...）”永远不会被动态加载css文件加载到javascript 。相同的动作宽度HTML上的普通样式表导致背景确定。还有一个，它只是IE：Chrome和Firefox的工作非常好。

对不起我的语言，我说一点英语，可以理解。

非常感谢。

Answer 1

尝试将document.createStylesheet用于IE浏览器。 MSDN对如何使用此方法有article。

潜在的跨浏览器解决方案：

(document.createStyleSheet) ? document.createStyleSheet(css_file) : $('<link rel="stylesheet" type="text/css" href="' + css_file + '" />').appendTo('head')

Answer 2

我不会直接回答你的问题，因为有更多可靠和简单的方法来达到预期的效果。

如果要使用<link>元素动态加载附加到文档的CSS文件，只需将其添加到标记中并最初设置disabled属性：<link rel=stylesheet href=style.css disabled>。您在JS / DOM中所要做的就是将其DOM属性disabled设置为false（布尔值）。在jQuery中，应该使用prop()方法来执行此操作。

如果您的css_file变量可以根据其他一些代码采用更多不同的值，建议的解决方案是更改class元素的<html>。然后，您可以轻松地使用.state1 #selector和.state2 #selector等选择器来表示HTML文档中的不同状态。

Answer 3

使用jQuery动态添加样式表在旧版IE中给了我很多问题。以下是我最终使用的跨浏览器：

// Prevent Firefox security error
document.getElementsByTagName('head')[0].appendChild(document.createElement('style'));

// Get last style sheet so that the rules we add will take precedence
var sheet = document.styleSheets[document.styleSheets.length-1]; 


// Internet Explorer method
if(sheet.addRule)
{

    // FORMAT:
    // sheet.addRule('selector','rule: xxx');
    // sheet.addRule('selector','rule: xxx');

    sheet.addRule('a:hover','color: yellow');
    sheet.addRule('a:hover','text-decoration: none');

}

// All other browsers
if(sheet.insertRule)
{

    // FORMAT: sheet.insertRule('selector { rule: xxx; rule: xxx; rule: xxx; }');
    sheet.insertRule('a:hover { color: yellow; text-decoration: none; }', sheet.cssRules.length);
}

Javascript Jquery添加StyleSheet IE

3 个答案: