Question

按照上一个问题 JQuery distinct between smartphones, tablet or computers with different sizes but the same $(window).width() ，现在我知道我使用的设备的实际尺寸，这要感谢window.screen.width，我想使用一个CSS文件或另一个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文件？

1 个答案: