Injecting a CSS stylesheet using Javascript

Question

I've written a simple CSS stylesheet that is meant to alter a page's background colour however, I'm having trouble calling it via Javascript through my HTML file. I know how to alter the background of an HTML file using Javascript, but the problem is that I don't know how to call on a stylesheet to alter the HTML file. Here's my code:

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>

Stylesheet

body {
  background-color: green;
}

sounds like you are trying to load a stylesheet dynamically. It is a bit tricky but it can be done — Jarek Kulikowski, Jul 20 '17 at 18:15
It's unclear what you're asking. Is the stylesheet in a separate resource (file)? Have you created it as a string? Applying a stylesheet to an HTML page requires using `link rel="stylesheet"` or `style` elements; you have none in your quoted code. — T.J. Crowder, Jul 20 '17 at 18:15
your question is not clear, may be u r looking for this: in `head` tag `` — tech2017, Jul 20 '17 at 18:17
It is a separate file called mystyle.css. I'm trying to apply it to my HTML file. — Glaz, Jul 20 '17 at 18:21
Do you want it to apply directly on load or only after a javascript event ? — Pierre Granger, Jul 20 '17 at 18:22

score 1 · Accepted Answer · answered Jul 20 '17 at 18:19

~~If the stylesheet is a separate resource,~~ (You've confirmed in a comment that it is), you link it with 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

(Can't really do a live example of this one with Stack Snippets.)

~~If you have it as a string, you apply it with a style element:~~

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

Live example:

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>

Although this is possible, I don't understand why you would use javascript to load a static file — arodjabel, Jul 20 '17 at 18:23
@arodjabel: There are use-cases, not least theming. The OP clearly said they wanted to do it with JavaScript, so... (Of course, they could be confused.) — T.J. Crowder, Jul 20 '17 at 18:24

score -2 · Answer 2 · answered Jul 20 '17 at 18:20

-2

maybe you mean you want to import a style sheet into your html file

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

answered Jul 20 '17 at 18:20

arodjabel

420
5
14

Injecting a CSS stylesheet using Javascript

2 Answers2