Question

我写了一个简单的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;
}

Answer 1

~~如果样式表是一个单独的资源，~~ （您已在评论中确认），则将其与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);

实例：

＆＃13;
＆＃13;
var style = document.createElement("style"); style.appendChild(document.createTextNode( "#p1 { background-color: yellow}" )); document.head.appendChild(style);
＆＃13;
<p id="p1">Altering style of first paragraph via Javascript.</p> <p id="p2">Altering style of second paragraph via Javascript.</p>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

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

使用Javascript注入CSS样式表

2 个答案: