通过 Javascript 动态选择 CSS URL答案

【问题标题】：select CSS URL dynamically via Javascript通过 Javascript 动态选择 CSS URL
【发布时间】：2016-07-25 22:38:53
【问题描述】：

有没有办法添加 <link rel="stylesheet" type="text/css"> 并根据一些 Javascript 表达式评估动态选择 URL？

（不使用 jQuery 或其他外部库——我想避免对外部库的依赖。）

特别是我想在页面加载期间或作为页面加载的结果运行一些 Javascript，而不是在以后运行，但我确实想确保已被替换或添加的 CSS 因运行该 Javascript 而被加载.

【问题讨论】：

如果这是重复的，我深表歉意，我确实进行了谷歌搜索，但不是 100% 确定要查找的内容。
试试这个：stackoverflow.com/questions/2685614/…
这有帮助，我正在寻找纯 Javascript 的东西，没有库依赖项。但我想我可以从那里弄清楚，看起来 jquery 并没有做任何花哨的事情。
您可以查看source of the loadCSS library（用于异步 CSS 加载的库）以了解他们使用哪些技巧来应用 CSS 而无需重新加载页面。不过，如果你是 JS 新手，那就有点过头了。

标签： javascript html css

【解决方案1】：

试试这个：

功能：

function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}

激活：

<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>

【讨论】：

显然你可以使用window.onload让它在页面加载时运行，而不是通过按钮。
pagestyle 是标准的跨浏览器 DOM 元素吗？
哦，没关系，你的意思一定是我把ID放在我想要的地方并使用javascript。这很聪明。
这总是会触发 CSS 重新加载？
不一定 - 如果您切换到 <a href="#"> 而不是按钮，它将触发重新加载。

【解决方案2】：

欢迎您试用此功能。

function addStylesheet(file) {
    var
        head = document.getElementsByTagName("head")[0],
        style = document.createElement("link");
    style.rel = "stylesheet";
    style.type = "text/css"; //optional
    style.href = file;
    head.appendChild(style);
}

addStylesheet("style.css");

【讨论】：