是否可以根据 JS 变量包含 CSS 文件？答案

【问题标题】：Is it possible to include a CSS file depending on a JS variable?是否可以根据 JS 变量包含 CSS 文件？
【发布时间】：2018-08-02 11:45:03
【问题描述】：

按照上一个问题 JQuery distinct between smartphones, tablet or computers with different sizes but the same $(window).width() 我现在知道我使用的设备的实际尺寸感谢 window.screen.width ，我想使用一个 CSS 文件或另一个取决于这个尺寸，例如：

<script>
var w = window.screen.width;
if(w < 800){
  //I should include somehow this <link href="{{ asset('assets/css/firstCSS.css') }}" type="text/css" rel="stylesheet">
} else {
  //Adding the second CSS file... <link href="{{ asset('assets/css/secondCSS.css') }}" type="text/css" rel="stylesheet">
}
</script>

我知道这段代码看起来很糟糕，但我无法找到解决方案。

（已编辑）是否可以根据 JavaScript 中的值使用 css 文件？不要回答我是...并告诉我如何请。

【问题讨论】：

您在寻找媒体查询吗？ w3schools.com/cssref/css3_pr_mediaquery.asp。如果您想让您的网站响应所有设备，请尝试使用媒体查询。
看看this链接。这可能会有所帮助。
Mediaquerys 像 $(window).width() 值一样工作...我需要这个媒体查询，但使用 window.screen.width 中的值

标签： javascript jquery html css screen-resolution

【解决方案1】：

是的，当然可以：

创建一个新的link 元素。
根据您的变量给它一个href。
将此link 附加到文档的head。

这应该是你的代码。

var w = window.screen.width;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
if (w < 800) {
  link.href = "{{ asset('assets/css/firstCSS.css') }}";
} else {
  link.href = "{{ asset('assets/css/secondCSS.css') }}";
}
document.head.appendChild(link);

【讨论】：