javascript - 是否可以根据 JS 变量包含 CSS 文件？

Question

继上一个问题 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 文件？不要回答我是...请告诉我怎么做。

Answer 1

是的，你当然可以做到:

• 创建一个新的 link 元素。
• 根据您的变量为其指定一个href。
• 将此链接附加到文档的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);