471

I'm looking for a way to insert a <style> tag into an HTML page with JavaScript.

The best way I found so far:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

This works in Firefox, Opera and Internet Explorer but not in Google Chrome. Also it's a bit ugly with the <br> in front for IE.

Does anyone know of a way to create a <style> tag that

  1. Is nicer

  2. Works with Chrome?

Or maybe

  1. This is a non-standard thing I should avoid

  2. Three working browsers are great and who uses Chrome anyway?

Improve this question
1

19 Answers 19

Reset to default
833

Try adding the style element to the head rather than the body.

This was tested in IE (7-9), Firefox, Opera and Chrome:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

FYI, document.head is supported in all major browsers.
@RobW - It's not supported in IE8 and below. It's supported in Modern browsers, but not all major ones.
why not just use document.querySelector("head")? It's event supported by IE8 by source
@allenhwkim: the answer predates introduction of querySelector(); today, I'd probably go with document.head, available since IE9
I had to append the style element to the head before accessing style.styleSheet.cssText. Before it was appended style.styleSheet was null.
|
119

<style> tags should be placed within the <head> element, and each added tag should be added to the bottom of the <head> tag.

Using insertAdjacentHTML to inject a style tag into the document head tag:

Native DOM:

document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)

jQuery:

$('<style>').text("body{background:red}").appendTo(document.head)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Improve this answer

1 Comment

Agree, it's best and simple but watch out for badly injected css if you arn't in control over it!
81 
const style = document.createElement("style")
style.textContent = "h1 { background-color: red; }"
document.head.appendChild(style)

The Modern & Easy Way

The code above is the gist of it; continue reading if you want to know the reasoning.

Why another answer? The accepted answer is old and includes redundant code for outdated browsers like the Internet Explorer. Other answers are unnecessarily complex or use properties like .innerHTML that allow for cross-site scripting attacks.

The type property is not needed

Most of the anwsers set the type property like so: style.type = "text/css". Setting this property is not necessary unless you need to support older browsers.

According to <style>: The Style Information element - HTML | MDN, the type attribute is optional and defaults to text/css:

type

This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and defaults to text/css if it is not specified; values other than the empty string or text/css are not used. Note: There is very little reason to include this attribute in modern web documents.

Adding the CSS

To add the CSS, use .textContent as it is safer and faster than alternative methods. Opposite to .innerHTML, it does not parse HTML and can therefore prevent cross-site scripting attacks.

Another similar property, .innerText, is like .textContent but takes CSS styles into account and represents only the "rendered" text content. As we are not interested in "rendered"-only content we prefer .textContent.

What does setting .textContent do?

Setting the .textContent property removes all the node's (element's) children and replaces them with the given string value.

Where to place the element?

The style element should be included in the head: "The <style> element must be included inside the <head> of the document. ...". [<style> ... | MDN]

To get the head use document.head as it has been supported by all major browsers for a long time already so there is no need for other fallbacks.

Improve this answer

5 Comments

It seems impossible to change the style of <body> through styles injected this way?
I don't see why it would be impossible; maybe I am misunderstanding your question? it works the same way as if you had written the style tag directly in HTML. Maybe you have a syntax error or another style defined after the one you are adding?
I have injected a style section like this and it works just fine for all elements inside the body, but I am not able to set the body margin to 0, it stays at the default 8px. If I do the same in the predefined style section, I can set the body margin to 0.
Based on that it works for other elements, it should also work for the body. It seems that there is something interfering with the body style. Maybe try removing other styles and scripts one by one until it works?
This is the best answer. The old answer from around 2010 was not wrong, it is just outdated. Thanks for providing an up-to-date answer and I appreciate the explanations regarding why some of the old jump-through-the-hoops are no longer needed.
40

Here's a script which adds IE-style createStyleSheet() and addRule() methods to browsers which don't have them:

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

You can add external files via

document.createStyleSheet('foo.css');

and dynamically create rules via

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
Improve this answer

1 Comment

This was very helpful to me in trying to load an external CSS file in a strange CMS context. I did run into some trouble with the addRule / removeRule part, so I just elimated those, and everything works fine.
39

I'm assuming that you're wanting to insert a style tag versus a link tag (referencing an external CSS), so that's what the following example does:

<html>
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <span>
   This is styled dynamically via JavaScript.
  </span>
 </body>
 <script type="text/javascript">
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
   } else {
        var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
 </script>
</html>

Also, I noticed in your question that you are using innerHTML. This is actually a non-standard way of inserting data into a page. The best practice is to create a text node and append it to another element node.

With respect to your final question, you're going to hear some people say that your work should work across all of the browsers. It all depends on your audience. If no one in your audience is using Chrome, then don't sweat it; however, if you're looking to reach the biggest audience possible, then it's best to support all major A-grade browsers

Improve this answer

9 Comments

This is basically the same as my solution; neither of them works in IE!
Appending a text node doesn't work in IE. But putting the style element in the head makes my solution work in Chrome! :-)
for IE, use styleNode.styleSheet.cssText = ...
(Very late comment) "It all depends on your audience. If no one in your audience is using Chrome, then don't sweat it" This attitude is what leads to people being locked into IE6 for years after IE7 and even IE8 are available. "But the web application I have to use only works in IE6"
Yep, you're right and I'm not necessarily advocating doing that either (hence the whole: "if you're looking to reach the biggest audience possible, then it's best to support all major A-grade browsers") but knowing the audience for your platform is important.
|
30

An example that works and are compliant with all browsers :

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
Improve this answer

3 Comments

wrong element: style has no rel or href attribute - did you mean link?
what does link element has to do with the question? the OP asked for style element. This answer has nothing to do with the question
@vsync style is for adding inline styles, link is correct for stylesheet sources and this has the advantage of avoiding cross-browser issues.
10 

document.head.innerHTML += `
  <style>
    h1 {
      color: red; 
    }
    p {
      color: blue;
    }
  </style>`
<h1>I'm red!</h1>
<p>I'm blue!</p>

By far the most straightforward solution. All you have to do is type the same as how you'd normally declare style tags, between the backticks

Improve this answer

2 Comments

Hi and welcome to the site. While this code may solve the given problem, you should also include an explanation of how and why it works.
⚠ Warning: I just fixed a bug which used this kind of code. It's a bad solution because it makes the whole head content to be recalculated and all styles and other things to be re-applied, causing flickering and breaking stuff.
8

Oftentimes there's a need to override existing rules, so appending new styles to the HEAD doesn't work in every case.

I came up with this simple function that summarizes all not valid "append to the BODY" approaches and is just more convenient to use and debug (IE8+).

window.injectCSS = (function(doc){
    // wrapper for all injected styles and temp el to create them
    var wrap = doc.createElement('div');
    var temp = doc.createElement('div');
    // rules like "a {color: red}" etc.
    return function (cssRules) {
        // append wrapper to the body on the first call
        if (!wrap.id) {
            wrap.id = 'injected-css';
            wrap.style.display = 'none';
            doc.body.appendChild(wrap);
        }
        // <br> for IE: https://ryanseddon.com/javascript/noscope/
        temp.innerHTML = '<br><style>'+ cssRules +'</style>';
        wrap.appendChild( temp.children[1] );
    };
})(document);

Demo: codepen, jsfiddle

Improve this answer

4 Comments

Worked perfectly in the latest Firefox, Chrome, and in ie8 (or at least the way I typed it in). I really don't know why this doesn't have more points.
This has no more points, because it is not valid, neither good thing to inject <style> tag outside <head> tag. Style tag should appear nowhere else but within <head> tag. That's widely adopted html standard. There is style attribute for inline styling and style attribute can be applied to any tag within <body> tag, including <body> tag it self.
This code did not work for me. I crafted some much shorter code that works in three browsers and will post my answer here.
I couldn't figure out why Chrome wasn't updating my styles when I added a style block to the head dynamically. I tried this and magically it updates. I need to investigate what actually is the difference here in this code that triggers the browser to re-render the css. But, big thanks!
6

Here is a variant for dynamically adding a class 

function setClassStyle(class_name, css) {
  var style_sheet = document.createElement('style');
  if (style_sheet) {
    style_sheet.setAttribute('type', 'text/css');
    var cstr = '.' + class_name + ' {' + css + '}';
    var rules = document.createTextNode(cstr);
    if(style_sheet.styleSheet){// IE
      style_sheet.styleSheet.cssText = rules.nodeValue;
    } else {
      style_sheet.appendChild(rules);
    }
    var head = document.getElementsByTagName('head')[0];
    if (head) {
      head.appendChild(style_sheet);
    }
  }
}
Improve this answer

Comments

5

All good, but for styleNode.cssText to work in IE6 with node created by javascipt, you need to append the node to the document before you set the cssText;

further info @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx

Improve this answer

Comments

5

This object variable will append style tag to the head tag with type attribute and one simple transition rule inside that matches every single id/class/element. Feel free to modify content property and inject as many rules as you need. Just make sure that css rules inside content remain in one line (or 'escape' each new line, if You prefer so). 

var script = {

  type: 'text/css', style: document.createElement('style'), 
  content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
  append: function() {

    this.style.type = this.type;
    this.style.appendChild(document.createTextNode(this.content));
    document.head.appendChild(this.style);

}}; script.append();
Improve this answer

2 Comments

I liked this solution, so I used it myself to change button sizes on mobile devices, but it is incorrect that the content property needs to be on one line: Simply concatenate multiple strings (over multiple lines) with the + operator.
True. I know and I knew that. But, sometimes, I am just too lazy to write as I am supposed to. :D Cheers.
5

You wrote:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Why not this?

var styleNode = document.createElement("style");
document.head.appendChild(styleNode);

Henceforward you can append CSS rules easily to the HTML code:

styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";

...or directly to the DOM:

styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");

I expect this to work everywhere except archaic browsers.

Definitely works in Chrome in year 2019.

Improve this answer

Comments

3

This function will inject css whenever you call the function appendStyle like this:
appendStyle('css you want to inject')

This works by injecting a style node into the head of the document. This is a similar technique to what is commonly used to lazy-load JavaScript. It works consistently in most modern browsers.

appendStyle = function (content) {
  style = document.createElement('STYLE');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(content));
  document.head.appendChild(style);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendStyle("body { background-color: #ff0000;}h1 { font-family: Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 3px; color: #ff0000; background-color: #000000;}p { font-family: Georgia, serif; font-size: 14px; font-style: normal; font-weight: normal; color: #000000; background-color: #ffff00;}")'>Press me to inject CSS!</button>
</body>

</html>

You can also lazy-load external CSS files by using the following snippet:

appendExternalStyle = function (content) {
  link = document.createElement('LINK');
  link.rel = 'stylesheet';
  link.href = content;
  link.type = 'text/css';
  document.head.appendChild(link);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html {
      font-family: sans-serif;
      font-display: swap;
    }
  </style>
</head>

<body>

  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>

</html>

Improve this answer

1 Comment

This is roughly the approach that I developed independently. Short and sweet and works in the latest Firefox, Microsoft Edge, and Chrome browsers. Of course, there are too many JavaScript errors in Internet Explorer to worry about including it in browser compatibility anymore.
2

as i know there are 4 ways to do that.

var style= document.createElement("style");
(document.head || document.documentElement).appendChild(style);
var rule=':visited {    color: rgb(233, 106, 106) !important;}';

//no 1
style.innerHTML = rule;
//no 2
style.appendChild(document.createTextNode(rule));

//no 3 limited with one group
style.sheet.insertRule(rule);
//no 4 limited too
document.styleSheets[0].insertRule('strong { color: red; }');

//addon
style.sheet.cssRules //list all style
stylesheet.deleteRule(0)  //delete first rule
Improve this answer

Comments

1

If the problem you're facing is 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.

let linkElement: HTMLLinkElement = 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

Improve this answer

1 Comment

Injecting the style block dynamically into the head didn't update the styling in some cases. This works though!
0

Anyone who is looking for Typescript version,

const addStyles = (styles) => {
  let styleNode : HTMLStyleElement = document.createElement('style'); 
  styleNode.type = 'text/css'; 
  if (styleNode.style)  
    styleNode.style.cssText = styles; 
  else  
    styleNode.appendChild(document.createTextNode(styles)); 
        
  /* Append style to the head element */ 
  document.head.appendChild(styleNode);  
}

Also, in react/vue/angular if direct injection of CSS is needed, you can use posstcss-js to convert CSS into JSS and use CSS-in-JSS to inject a new styleSheet directly. For more info, please follow this documentation.

Update

You can use document.head as well as per @Brandon McConnell's comment.

Improve this answer

2 Comments

There is no reason to use document.getElementsByTagName("head")[0]. document.head is supported by all major and modern browsers, all the way back to IE9.
Agreed. updated the answer as per your suggestion.
0

The most trival answer:

function addStyle (styleText) {
  const styleNode = document.createElement('style'); 
  styleNode.type = 'text/css'; 
  styleNode.textContent = styleText;
  document.documentElement.appendChild(styleNode);  
  return styleNode;
}
Improve this answer

Comments

0

I'm used to using this 

function createElement(_type,code) {
  let s = document.createElement(_type);
  s.appendChild(document.createTextNode(code));
  document.body.appendChild(s);
}
createElement('style','body{background: red}') // <style> code </style>
createElement('script','console.log("work")') // <script> code </script>

Improve this answer

Comments

-3 
this link may helpful to you:

http://jonraasch.com/blog/javascript-style-node

Improve this answer

1 Comment

Please don’t use preformatted text/code blocks for a short paragraph. Linking for an answer this way is also useless. Please summarize the website first.