Question

我正在设置一个网站，为多个皮肤导入多个css文件。有没有办法在加载页面时在样式表上设置不同的优先级。

我希望浏览器首先获取正常的CSS，我的js和我的所有图片。之后，当页面完全启动并运行时，它可以获取我的其他选项css样式表。（因为这些是由用户声明的'我现在想要使用黑暗的css＆＃39;）

举例说明我的情况：

<!-- CSS links -->
<link rel="stylesheet" href="./css/transit.css"/>
<link rel="stylesheet" href="./css/transit_dark.css"/>

有没有办法让我的DOMContent渲染后加载黑色样式表？

Answer 1

没有纯粹的声明性解决方案。你能做的是：

在初始页面加载后插入样式表。不要以＆＃34; DOMContentLoaded＆＃34;开头。事件，因为那只是DOM。您可能要等到页面加载＆＃34;表示呈现页面所需的一切（包括CSS和图像）的事件已经存在。
将其插入rel="alternate stylesheet"，以便浏览器在选定之前不会应用它。

window.addEventListener("load", function(){
    var l = document.createElement("link")
    l.rel = "alternate stylesheet"
    l.href = "./css/transit_dark.css"
    l.title = "Transit: Dark" // a title is mandatory for alternates
    document.head.appendChild(l)
})

使用备用样式表在语义上是一种非常好的方式来做你正在做的事情，除了让浏览器预加载所有这些并在自己的UI中提供样式表选择器（Firefox开箱即用）

Answer 2

您可以使用javascript（jQuery）执行此操作：

$( document ).ready(function() {
    $('head').append('<link rel="stylesheet" type="text/css"
    href="./css/transit_dark.css">');
)};

设置不同资源的优先级

2 个答案: