代码之家 › 专栏 › 技术社区 › Ricard Espinàs Llovet

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

screen-resolution css html jquery javascript

Ricard Espinàs Llovet · 技术社区 · 7 年前

在上一个问题之后 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文件?别回答我是的…告诉我怎么做。

1 回复 | 直到 7 年前

cÐ½Ådk 7 年前

是的,当然可以:

新建 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);

推荐文章