javascript - 在 IE7+ 的动态样式表中添加 @import 语句

Question

我在为 IE 添加带有 @import 语句的动态样式元素时遇到问题。试试这个:

var string = '@import url(test.css)';
var style = document.createElement('style');

if (style.styleSheet) { // IE
    style.styleSheet.cssText = string;
} else {
    var cssText = document.createTextNode(string);
    style.appendChild(cssText);
}

document.getElementsByTagName('head')[0].appendChild(style);

这适用于 FF/Chrome 但不适用于 IE。它似乎可以识别 style.styleSheets.imports，但不会应用导入的样式表。这是错误还是限制？

Answer 1

许多旧的浏览器不能处理不同形式的@import 指令，这可以用来对它们隐藏css。检查http://www.w3development.de/css/hide_css_from_browsers/import/了解详情。

@import 指令必须在样式表中排在第一位，否则它们将被忽略。但是 IE 不会忽略放错位置的 @import 指令。

编辑:查看addImport method用于在 IE 中注入(inject)样式表。