调整屏幕大小后启用样式表？在IE和Chrome

var $ = jQuery.noConflict(); 
$(document).ready(function() { 
if ((screen.width>=1024)) { 
$('link[title=theme800]')[0].disabled=true; 
$('link[title=theme]')[0].disabled=false; 
} 
if ((screen.width<1024)) { 
$('link[title=theme]')[0].disabled=true; 
$('link[title=theme800]')[0].disabled=false; 
} 
});

不工作我的HTML页面：调整屏幕大小后启用样式表？在IE和Chrome

<link title = "theme" rel="stylesheet" type="text/css" media="all" href="theme.css" /> 
<link title = "theme800" rel="stylesheet" type="text/css" media="all" href="theme800.css" />

好吧，我在不同的屏幕尺寸测试我的网站。出于某种原因，当我处于'< 1024'模式时，第二个样式表（theme800）未在IE和Chrome中加载，它与Firefox tho一起使用。我确实给了一切标题和一切。同样，它可以在Firefox中运行，但在其他浏览器中不起作用。我如何让它在其他浏览器中工作？帮助！

谢谢。

来源

2013-01-06 Yoosuf

尝试切换链接元素的href。 – AgnosticDev

你的代码中没有任何东西可以阻止从加载链接....更有可能你有相同的CSS选择器和最后一个加载优势。事实上，你的代码不会做任何事情 – charlietfl

我尝试将其切换到href，仍然无法正常工作。 – Yoosuf

你可能会好得多使用CSS媒体查询您的具体情况

来源

2013-01-06 01:29:33 charlietfl

由于CSS media queries还没有被广泛尚未支持，您还可以考虑动态加载的样式表。基于this example，你可以试试：

<script type="text/javascript"> 
    function load_stylesheet(file_name) { 
     // Create the stylesheet 
     var css_file = document.createElement('link'); 
     css_file.setAttribute('rel', 'stylesheet'); 
     css_file.setAttribute('type', 'text/css'); 
     css_file.setAttribute('href', file_name); 
     // Append the stylesheet to the document 
     document.getElementsByTagName('head')[0].appendChild(css_file); 
    } 

    if (screen.width >= 1024) { 
     load_stylesheet('theme.css'); 
    } else { 
     load_stylesheet('theme800.css'); 
    } 
</script>

请注意，这不是与jQuery尽快进行有目的的，所以样式表可以加载，无需等待jQuery的第一加载。否则，用户可能会有明显的延迟，在此期间，内容将显得空泛而没有风格。

来源

2013-01-06 01:50:00 Boaz

调整屏幕大小后启用样式表？在IE和Chrome

回答

相关问题