jquery - 动态加载和卸载 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

如果您对不同的屏幕有不同的 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

最好动态更改类和 id 并让 css 完成它的工作。

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

首先检测显示的类型并相应地分配类