使用 Javascript 注入 CSS 样式表 [重复]答案

【问题标题】：Injecting a CSS stylesheet using Javascript [duplicate]使用 Javascript 注入 CSS 样式表 [重复]
【发布时间】：2017-12-26 14:22:33
【问题描述】：

我编写了一个简单的 CSS 样式表，旨在更改页面的背景颜色，但是，我无法通过我的 HTML 文件通过 Javascript 调用它。我知道如何使用 Javascript 更改 HTML 文件的背景，但问题是我不知道如何调用样式表来更改 HTML 文件。这是我的代码：

HTML

<html>
 <body>
  <p id="p1">Altering style of first paragraph via Javascript.</p>
  <p id="p2">Altering style of second paragraph via Javascript.</p>
 <script>
   document.getElementById("p1").style.color = "green";
   var p2 = document.getElementById("p2");
   p2.setAttribute("style", "font-size: 20px;");
 </script>
 </body>
</html>

样式表

body {
  background-color: green;
}

【问题讨论】：

听起来您正在尝试动态加载样式表。这有点棘手，但可以做到
不清楚你在问什么。样式表是否在单独的资源（文件）中？您是否将其创建为字符串？将样式表应用于 HTML 页面需要使用 link rel="stylesheet" 或 style 元素；您引用的代码中没有。
你的问题不清楚，可能你正在寻找这个：在head标签<link rel="stylesheet" type="text/css" href="mystyle.css">
这是一个名为 mystyle.css 的单独文件。我正在尝试将它应用到我的 HTML 文件中。
您希望它直接在加载时应用还是仅在 javascript 事件之后应用？

标签： javascript html css

【解决方案1】：

也许您的意思是要将样式表导入到您的 html 文件中

<link rel="stylesheet" href="public/shared_libraries/bootstrap-3.3.4-dist/css/bootstrap.css">

【讨论】：

【解决方案2】：

~~如果样式表是一个单独的资源，~~ （您已在评论中确认它是），您将其与link rel="stylesheet" 链接：

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "mystyle.css";
document.head.appendChild(link);
// Or document.querySelector("head").appendChild(link);
// But I don't think that's necessary on any vaguely-modern browser

（不能用 Stack Snippets 做一个真实的例子。）

~~如果您将其作为字符串，则将其与style 元素一起应用：~~

var style = document.createElement("style");
style.appendChild(document.createTextNode("/*...style text here...*/"));
document.head.appendChild(style);

活生生的例子：

var style = document.createElement("style");
style.appendChild(document.createTextNode(
  "#p1 { background-color: yellow}"
));
document.head.appendChild(style);

<p id="p1">Altering style of first paragraph via Javascript.</p>
<p id="p2">Altering style of second paragraph via Javascript.</p>

【讨论】：

虽然这是可能的，但我不明白你为什么要使用javascript来加载静态文件
@arodjabel：有用例，尤其是主题。 OP 明确表示他们想用 JavaScript 来做，所以......（当然，他们可能会感到困惑。）