如何使用 JavaScript 更改 CSS 文件？答案

【问题标题】：How to change CSS file using JavaScript?如何使用 JavaScript 更改 CSS 文件？
【发布时间】：2016-06-02 22:48:54
【问题描述】：

我会问如何使用纯 Javascript 更改 CSS 的 src。我在互联网上看到一个人为此使用了 cookie，我尝试过这样的事情：

window.onload = function onload() {
setTimeout(function(){
    document.styleSheets[1].href = "file:///C:/Users/Ma%C5%9Blan/Desktop/Site/bootstrap-3.3.6-dist/project1a.css";
    }, 3000);

};

它没有用（我想在 3 秒后更改 CSS，我知道实际本地化是本地化的，在我的 PC 上。只是尝试:)）。我想交换整个文件。

有什么想法吗？如果在纯 JS 中是不可能的，那么请告诉我 jQuery 的方式。

谢谢！

【问题讨论】：

你为什么要改变一个css文件？然后您需要重新加载（// 重新渲染）页面以更新更改。使用 Javascript 属性处理程序。developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style 或者您可能正在寻找指定一个 css 文件，在这种情况下您需要在文档准备好之前注入它。对您想要实现的目标进行更多描述会很棒。
我在整个文档中使用了很多 CSS。 3 秒后我需要更改很多元素，所以我想更改整个 CSS，这对我来说会更容易：/
我想交换 CSS 文件。
我会删除 css 文件并使用新源重新创建它 - 以确保呈现新样式。
意思是上面的样式标签^^如果你想使用jquery，请选择父级并删除子级（Vanilla JS）你可以简单地使用$(stylesheet).remove() 现在document.head += (style = document.createElement("style")); -JQ $("head").append(style = document.createElement("style"))最后 style.src="src"

标签： javascript html css src

【解决方案1】：

document.styleSheets 是只读属性，因此您无法更改该数组的属性。

您想要做的是获取头部中所有 <link> 元素的列表，然后使用正则表达式或条件语句来获取您要替换的元素，并在该元素上使用 .href .

例如

// get all links in the head (including CSS)
var allLinks = document.head.getElementsByTagName('link');
// find and replace the element
for (var i = 0; i < allLinks.length; i++) {
    if ( allLinks[i].href = "old/url/to/css/file.css") {
        allLinks[i].href = "file:///C:/Users/Ma%C5%9Blan/Desktop/Site/bootstrap-3.3.6-dist/project1a.css";
    }
}

【讨论】：