在文档准备就绪事件(document.ready)触发后,我会根据用户的分辨率动态加载样式表。以下代码适用于Chrome、Firefox和IE浏览器:
问题在于它在Safari中无法正常工作。我没有Mac,所以我没有控制台错误信息,但我知道样式表没有被添加。我需要改变什么才能使它在Safari中工作?
PS:我不想使用媒体查询。
编辑
起初我使用了一个
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何时被附加。