調整屏幕大小後啓用樣式表？在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

回答

相關問題