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

Question

继上一个问题多亏 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。
将此 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);

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

Is it possible to include a CSS file depending on a JS variable?

javascript

jquery

html

css

screen-resolution