动态添加样式表

Question

在文档准备就绪事件(document.ready)触发后，我会根据用户的分辨率动态加载样式表。以下代码适用于Chrome、Firefox和IE浏览器：

var TheFileName = '/SomeDirectory/SomeFileName.css';

if (document.createStyleSheet) { 

    //finally found something IE got right
    document.createStyleSheet(TheFileName);

} else {

    $('<style id="TestCSS" type="text/css"></style>').appendTo('head');

    $.get(TheFileName , function (TheCSS) {

        $("#TestCSS").append(TheCSS);
    });
}

问题在于它在Safari中无法正常工作。我没有Mac，所以我没有控制台错误信息，但我知道样式表没有被添加。我需要改变什么才能使它在Safari中工作？

PS：我不想使用媒体查询。

编辑

起初我使用了一个<link>标签的函数进行添加。我的页面完全是动态生成的，问题在于如果使用<link>标签，在DOM渲染后添加样式表会使元素没有样式。因此，我使用setTimeout检查$('#TestCSS').length是否加载样式表，然后触发创建HTML的函数。通过<style>标签无法知道CSS何时被附加。

- frenchie

---

可能是如何使用Javascript加载CSS文件？的重复问题。 - Benjamin

@Benjamin：不是重复的问题，因为答案使用了<link>标签。请查看编辑。 - frenchie

绝对不可能出现在头部的样式或链接标签不适用于动态生成的元素。这就是 CSS 的美妙之处，它适用于所有现有和未来的元素。 - adeneo

@adeneo：不，一旦生成HTML后，当我添加CSS样式表时，HTML元素就没有样式了。这可能在所有浏览器中都不是真的，但这是我的经验。 - frenchie

Answer 1

为什么不直接将样式表作为链接标签插入，而非使用ajax加载，这样应该跨浏览器兼容性更好？

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.type = 'text/css';
link.href = '/SomeDirectory/SomeFileName.css';
document.head.appendChild(link);

- adeneo

---

我一开始就遇到了这个问题。我的页面完全是动态生成的，问题在于在DOM呈现之后添加样式表会使元素没有样式。因此，我的做法是检查$('#TestCSS').length以查看样式表是否已加载，然后我触发创建HTML的函数。对于<link>标签，无法确定CSS何时被附加。 - frenchie

使用链接或样式标签添加样式表是完全相同的，除非您做错了其他事情，否则不会有任何元素样式上的差异。在头部中的样式表也将应用于动态创建的元素，因此这不是问题。 - adeneo

这似乎有效。我只记得由于某种原因，它与链接标签不起作用，这就是为什么我改变了我的代码以添加<style>标签的原因。 - frenchie

根据使用情况，如果您在头部的body之前添加一个脚本，并且可以确定从URL或服务器发送到客户端并放置在所述脚本上方的脚本标记中加载什么，它将在DOM呈现之前解析（因此不完全理想，但是嘿，现实生活中的项目总是理想的吗？） - Kelly Milligan