Injecting a CSS stylesheet using Javascript [duplicate]

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
– Jarek Kulikowski, Commented Jul 20, 2017 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
– T.J. Crowder, Commented Jul 20, 2017 at 18:15
your question is not clear, may be u r looking for this: in head tag <link rel="stylesheet" type="text/css" href="mystyle.css"> — tech2017
– tech2017, Commented Jul 20, 2017 at 18:17
It is a separate file called mystyle.css. I'm trying to apply it to my HTML file. — Glaz
– Glaz, Commented Jul 20, 2017 at 18:21
Do you want it to apply directly on load or only after a javascript event ? — Pierre Granger
– Pierre Granger, Commented Jul 20, 2017 at 18:22

T.J. Crowder · Accepted Answer · 2017-07-20 18:19:04Z

~~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: 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.)

arodjabel · Accepted Answer · 2017-07-20 18:20:20Z

-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, 2017 at 18:20

arodjabel

4375 silver badges15 bronze badges

Collectives™ on Stack Overflow

Injecting a CSS stylesheet using Javascript [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related