Add CSS to with JavaScript?

Question

Is there a way to add css from a string in the javascript file to the head of a document with javascript?

Let's say we have a webpage, which has a lightbox script, this script requires a css file to function.

Now adding this css file with <link> will make the css file download even for people that don't have js enabled.

I know that I can dynamically load the css file with the script, but that also means that there will be 2 http requests, and in cases where there is little to no css in the file I find this inefficient.

So I thought to myself, what if you could put the css that you have in the css file, into the script, have the script parse the css and add it into the head, or even better just have the script add the css directly into the <head> of the document.

But I have found nothing online that suggests that this is possible, so is it possible to add css to the head with js?

Edit + SOLUTION:

I edited roryf's answer to work cross browser (except IE5)

Javascript:

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }

Have a look at the following link .. It explains every little details about your question ... and it is named appropriately [Totally Pwn CSS with Javascript](http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript) — Gabriele Petrioli, Oct 13 '10 at 09:07
Related question: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript — Timo Huovinen, Jul 14 '16 at 18:29

score 42 · Answer 1 · edited Mar 13 '22 at 17:50

42

Edit: As Atspulgs comment suggest, you can achieve the same without jQuery using the querySelector:

document.head.innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';

Older answer below.

You could use the jQuery library to select your head element and append HTML to it, in a manner like:

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

You can find a complete tutorial for this problem here

edited Mar 13 '22 at 17:50

Timo Huovinen

53,325
33
152
143

answered Oct 13 '10 at 09:08

thomaux

19,133
10
76
103

4

Again, this method loads a new file, which Yuri wanted to avoid. Also, loading the entire jQuery library for something as simple as this is rather silly. – TRiG Oct 13 '10 at 09:13
6

without jQuery: document.querySelector('head').innerHTML += ''; – Atspulgs Jan 10 '17 at 20:14
5

`document.head`, is the `head` element! – Iharob Al Asimi Mar 22 '17 at 18:14

moefinley · Accepted Answer · 2019-02-08T20:01:28.270

33

As you are trying to add a string of CSS to <head> with JavaScript? injecting a string of CSS into a page it is easier to do this with the <link> element than the <style> element.

The following adds p { color: green; } rule to the page.

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

You can create this in JavaScript simply by URL encoding your string of CSS and adding it the HREF attribute. Much simpler than all the quirks of <style> elements or directly accessing stylesheets.

var linkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

This will work in IE 5.5 upwards

The solution you have marked will work but this solution requires fewer dom operations and only a single element.

edited Feb 08 '19 at 20:01

answered Apr 19 '18 at 14:50

moefinley

1,248
1
13
26

1

`let linkElement: HTMLLinkElement = this.document.createElement('link');` will work in IE 5.5, you say? – Jānis Elmeris May 31 '18 at 19:08
@JānisElmeris if you use javascript with the syntax used by the ie it will. createElement and setAttribute are not new methods. – Bogdan M. Aug 08 '18 at 08:05
@BogdanM., well, I just expect code described as "this will work in ..." to actually already have the proper syntax. – Jānis Elmeris Aug 10 '18 at 09:57
`let linkElement: HTMLLinkElement = ...` - what's this syntax called? – Scott Martin Nov 26 '18 at 11:35
Sorry, that's a Typescript type. It shouldn't really be in there. – moefinley Nov 26 '18 at 22:32
Aren't you missing the part where you append it to ``? – MiniGod Apr 01 '20 at 16:02
I would add it to the head in the same way elements are added in the question. It doesn't bear repeating. – moefinley Apr 03 '20 at 10:55
it is necessary add element to the head: `document.head.appendChild(linkElement)` – TitanFighter Oct 26 '20 at 18:48

Jeriko · Answer 3 · 2010-10-14T09:04:19.310

27

If you don't want to rely on a javascript library, you can use document.write() to spit out the required css, wrapped in style tags, straight into the document head:

<head>
  <script type="text/javascript">
    document.write("<style>body { background-color:#000 }</style>");
  </script>
  # other stuff..
</head>

This way you avoid firing an extra HTTP request.

There are other solutions that have been suggested / added / removed, but I don't see any point in overcomplicating something that already works fine cross-browser. Good luck!

http://jsbin.com/oqede3/edit

edited Oct 14 '10 at 09:04

answered Oct 13 '10 at 09:10

Jeriko

6,547
4
28
40

13

That's fine until you want to add a CSS rule after the document has rendered. – Tim Down Oct 13 '10 at 09:36
Good thing OP doesn't have that requirement then! Your solution covers that, but imho it's totally overkill for non-js/lightbox css degradation as this. – Jeriko Oct 13 '10 at 09:50
2

One thing to note: `document.write` doesn't work in real XHTML documents, but that's unlikely to be a problem since hardly anyone really uses XHTML. – Tim Down Oct 13 '10 at 10:30
it's interesting that it works but having style in the body looks a bit hacky :) p.s. you can put the document.write in the head section of the site and it seems to work fine. – Timo Huovinen Oct 13 '10 at 12:06
My bad - it doesn't fire when the `script` is nested inside `style` tags, but you can drop it straight into the head :) – Jeriko Oct 13 '10 at 12:21
@Jeriko you can edit the answer so that you don't confuse people – Timo Huovinen Oct 13 '10 at 12:36
Ewww... Since several issues I've had with `document.write` destroying my entire page, I make a point to avoid it and stick to `document.getElementById(...).innerHTML = `. There's never a need for `document.write`. – stevendesu Oct 13 '10 at 13:48
Updated my answer to include `getElementById`. I don't like `document.write` either, but it's often a lot simpler to explain, as you can see. – Jeriko Oct 13 '10 at 14:02
@steven_desu I added a non document.write solution in my question. plus innerHTML ain't that much better :) @Jeriko I really don't like your dynamic styles approach, why not use the edited roryf solution? MUCH more elegant IMO. p.s. I marked your's as best because it was the simplest and working solution to my incomplete question. – Timo Huovinen Oct 13 '10 at 14:14
I tend to prefer solutions that are most likely to work cross-browser. It seems @roryf's answer has IE issues. As far as I'm concerned, when you're already doing something quick and dirty (adding css rules on the fly), it's whatever gets the job done properly :P – Jeriko Oct 13 '10 at 14:28
@Jeriko: assigning to the `innerHTML` property of a ` – Tim Down Oct 13 '10 at 15:15
@steven_desu: `document.write` will only destroy your entire page if you use it incorrectly (e.g. after the page has rendered). There's no danger if you know what you're doing. And as this very example proves, there sometimes is a need for `document.write`. – Tim Down Oct 13 '10 at 15:18
@jeriko yea, I agree with Tim Down, consider removing the second example, or make it into what I posted in the question which is roryf's answer that works in IE. – Timo Huovinen Oct 14 '10 at 08:41
Thanks Tim and Yuri - seems we are in agreeance.. I never understood why things had to be overcomplicated when a simple solution works, and invariably works better :) I've removed the other solution. – Jeriko Oct 14 '10 at 09:02
1

I would avoid document.write as much as possible. – Orcra Apr 06 '14 at 22:24
I would avoid document.write() because it makes web page render 10 times slower according to Google PageSpeed Insight – AKIB AKRAM May 19 '21 at 22:17

roryf · Answer 4 · 2010-10-13T15:44:48.590

14

A simple non-jQuery solution, albeit with a bit of a hack for IE:

var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";

var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);

It seems IE does not allow setting innerText, innerHTML or using appendChild on style elements. Here is a bug report which demonstrates this, although I think it identifies the problem incorrectly. The workaround above is from the comments on the bug report and has been tested in IE6 and IE9.

Whether you use this, document.write or a more complex solution will really depend on your situation.

edited Oct 13 '10 at 15:44

answered Oct 13 '10 at 09:44

roryf

29,592
16
81
103

Doesn't work in IE. Certainly not 6 or 7, don't have 8 available to test right now. IE doesn't like `document.createElement('style')`. – Tim Down Oct 13 '10 at 09:51
@Tim works for me in IE6 and 9, since your solution has the exact same line perhaps you can explain further – roryf Oct 13 '10 at 10:19
@roryf: Oh, yes, you're right, sorry. Foolishly I made the elementary mistake of believing the line number in IE's error. The error's actually in `styleElement.innerHTML = css;`. Certainly fails in IE 7, retesting in IE 6 now (waiting for VM to come alive). – Tim Down Oct 13 '10 at 10:25
@Tim thanks, I suspected that might be a problem, shame on me for not testing properly! – roryf Oct 13 '10 at 11:12
http://www.phpied.com/dynamic-script-and-style-elements-in-ie/ a link that i found thanks to the ie error that it gave me :) – Timo Huovinen Oct 13 '10 at 12:20
if this worked cross-browser and maybe even ie5, then this would be the best answer ever. – Timo Huovinen Oct 13 '10 at 14:23
2

I couldn't leave this alone so did a bit of research and found a workaround for IE, this should now work cross-browser – roryf Oct 13 '10 at 15:46
@roryf: So you have. Eugh. ` – Tim Down Oct 13 '10 at 21:54
@Tim good point, wonder if creating a `` element would work... Anyway, 'eugh' is a pretty accurate description ;-) – roryf Oct 14 '10 at 12:00

score 14 · Answer 5 · answered Nov 05 '18 at 10:29

14

Here's a simple way.

/**
 * Add css to the document
 * @param {string} css
 */
function addCssToDocument(css){
  var style = document.createElement('style')
  style.innerText = css
  document.head.appendChild(style)
}

answered Nov 05 '18 at 10:29

Ally

4,894
8
37
45

I would use [`style.textContent`](https://stackoverflow.com/a/35213639/8804293) – Elijah Mock Aug 02 '23 at 21:03

score 10 · Answer 6 · answered Oct 13 '10 at 09:32

Here's a function that will dynamically create a CSS rule in all major browsers. createCssRule takes a selector (e.g. "p.purpleText"), a rule (e.g. "color: purple;") and optionally a Document (the current document is used by default):

var addRule;

if (typeof document.styleSheets != "undefined" && document.styleSheets) {
    addRule = function(selector, rule) {
        var styleSheets = document.styleSheets, styleSheet;
        if (styleSheets && styleSheets.length) {
            styleSheet = styleSheets[styleSheets.length - 1];
            if (styleSheet.addRule) {
                styleSheet.addRule(selector, rule)
            } else if (typeof styleSheet.cssText == "string") {
                styleSheet.cssText = selector + " {" + rule + "}";
            } else if (styleSheet.insertRule && styleSheet.cssRules) {
                styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
            }
        }
    }
} else {
    addRule = function(selector, rule, el, doc) {
        el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
    };
}

function createCssRule(selector, rule, doc) {
    doc = doc || document;
    var head = doc.getElementsByTagName("head")[0];
    if (head && addRule) {
        var styleEl = doc.createElement("style");
        styleEl.type = "text/css";
        styleEl.media = "screen";
        head.appendChild(styleEl);
        addRule(selector, rule, styleEl, doc);
        styleEl = null;
    }
};

createCssRule("body", "background-color: purple;");

Very thorough answer, and I believe it will come in handy, but it will be painstaking to take a simple css stylesheet and convert it to this. — Timo Huovinen, Oct 13 '10 at 12:07

NVRM · Answer 7 · 2021-03-07T13:00:29.603

2

In one call:

document.head.appendChild(Object.assign(document.createElement("style"), {textContent: `
    select, button, input, details, summary { cursor: pointer }
    input { padding: 0.5rem }
    button, select  { margin: 0.5rem }
    @media (max-width:640px) { button  { width: 100% } i {display: block } }
  `
}))

edited Mar 07 '21 at 13:00

answered Mar 02 '21 at 01:33

NVRM

11,480
1
88
87

score 1 · Answer 8 · answered Dec 21 '21 at 08:02

1

Shortest One liner:

const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML = css;

// Usage:
addCSS("body{background:red}");

answered Dec 21 '21 at 08:02

chickens

19,976
6
58
55

Does it work cross browser? – Timo Huovinen Dec 22 '21 at 09:11
It should support all browsers except old IE. I'd appreciate if someone can tell what is the oldest IE version supported. – chickens Dec 22 '21 at 17:12

score 1 · Answer 9 · answered Jan 14 '22 at 13:30

Late to the party, quite similar to all solution but appends only once the script to the head:

export const injectHeadCss = () => {
  let style: HTMLStyleElement | null = document.head.querySelector('style[my-style]');

  if (style !== null) {
    return;
  }

  style = document.createElement('style');
  style.setAttribute('my-style', '');
  style.innerHTML = `
    .class1 {
      background: pink;
    }

    .class2 {
      background: purple;
    }
  `;

  document.head.append(style);
};

K. Kilian Lindberg · Answer 10 · 2022-02-17T13:10:13.180

Maximizing compatibility, working for most things made 2009-2022 and likely beyond. This solution is intentionally not made with ES6 etc; using an arrow function, let-variable, append (2014) etc.

This short version adds styling to the head-section of a web page and can also be done via the DOM to access the head-section to maximize compatibility further - since querySelector wasn't widely adapted until 2009.

Note that innerHTML / write nowadays isn't recommended for production.

Just copy+paste it into the console to try it out and a page like this gets some nice additions;

function ahsf(styling){ document.querySelector('head').innerHTML+="<style>"+ styling +"</style>";}
//Called with
ahsf(" * { border: 1px dashed #f09 !important; } ");

Add CSS to with JavaScript?

Edit + SOLUTION:

10 Answers10

Linked