动态添加样式表

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中工作？

附言:我不想使用媒体查询。

编辑

我最初有一个使用添加的<link>标记的函数。我的页面完全是动态生成的，问题是如果使用<link>标记，在呈现DOM之后添加样式表会使元素失去样式。因此，我要做的就是使用setTimeout检查是否加载了样式表，然后启动创建$('#TestCSS').length的函数。有了标记，就无法知道什么时候附加了CSS。

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);