動態加載和卸載css和腳本jQuery

Question

我想根據設備或桌面的屏幕大小動態加載CSS和JS。有沒有任何方法或插件可用於此功能。

所以基本上，屏幕的最小和最大寬度將觸發哪個樣式表和腳本加載和卸載。在我的桌面瀏覽器上的示例中，當我調整瀏覽器的寬度時，會觸發動態加載/卸載樣式和腳本。

此外，它應該加載外部/遠程樣式表和腳本。

謝謝:)

Answer 1

這裏你的答案

<link rel="stylesheet" type="text/css" href="style.css" class="test"> 
<script type='text/javascript' src='jquery-1.8.3.min.js'></script> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    var WindowWidth = $(window).innerWidth(); 
    if(WindowWidth >= 801){ 
    $("link.test").attr("href", "applyCss.css"); 
    return false; 
    } 
    else if(WindowWidth <= 800){ 
    $("link.test").attr("href", "applyCss-two.css"); 
    return false; 
    } 
}); 
$(window).resize(function() { 
    var WindowWidth = $(window).innerWidth(); 
    if(WindowWidth >= 801){ 
    $("link.test").attr("href", "applyCss.css"); 
    return false; 
    } 
    else if(WindowWidth <= 800){ 
    $("link.test").attr("href", "applyCss-two.css"); 
    return false; 
    } 
}); 
</script> 

Answer 2

如果你有不同的screns不同的CSS文件

更好您將它們合併，並運行媒體查詢。 Jquery和CSS都有自己的媒體查詢方法。 例如：

CSS Media Queries- 



@media all and (max-width: 699px) and (min-width: 520px){ 
     body { 
     background-color: green; 
     color:white; 
     } 
    } 
    @media all and (max-width: 700px) and (min-width: 1180px){ 
     body { 
     background: black; 
     color:yellow; 
     } 
    } 

Jquery: 
<script> 


$(document).ready(function(){ 
css_small={ 
    "background-color":"green", 
    "color":"white" 
    } 
    css_big={ 
    "background-color":"black", 
    "color":"yello" 
    } 

    if($(window).width <699 && $(window).width >520){ 
    $(body).css(css_small); 
    } 
    if($(window).width <1180 && $(window).width >700){ 
    $(body).css(css_big); 
    } 
}) 
$(window).resize(function(){ 
css_small={ 
    "background-color":"green", 
    "color":"white" 
    } 
    css_big={ 
    "background-color":"black", 
    "color":"yello" 
    } 

    if($(window).width <699 && $(window).width >520){ 
    $(body).css(css_small); 
    } 
    if($(window).width <1180 && $(window).width >700){ 
    $(body).css(css_big); 
    } 
}) 
</script> 

我希望這是你正在尋找.. 什麼，肯定不會忘了加上jQuery的鏈接

Answer 3

這將是你改變了class和id動態更好，讓CSS做它的工作。

$('#MyElement').addClass('MyClass'); 

首先檢測顯示類型，並相應地分配類