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：我不想使用媒体查询。

**EDIT:**

我最初使用的函数使用了添加的<link>标记。我的页面完全是动态生成的，问题是如果使用<link>标记，在呈现DOM之后添加样式表会使元素不正常。所以我要做的是使用setTimeout检查$('#TestCSS').length以查看样式表是否已加载，然后我触发创建HTML的函数。使用标记，无法知道何时附加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);

动态添加样式表

1 个答案: