Adding Or Injecting More Than One Row Of Css With Vanilla Javascript In An Array-like Way

I use the following code to make all text red in a webpage: var myCss = document.createElement('style'); myCss.type = 'text/css'; myCss.innerHTML = ' * {color: red !important} '; d

Solution 1:

You can do multiple lines of css within a string if you want. You don't need an array to do this.

For readability purposes, you can set your multiline style string using an ES6 template literal:

// ES6 template literal `backtick` syntaxvar myCss = `
  * {background: blue;}
  h2 {background: #333; color: red;}`,

  head = document.head || document.getElementsByTagName("head")[0],
  style = document.createElement("style");

style.type = "text/css";
style.styleSheet ? style.styleSheet.cssText = myCss : style.appendChild(document.createTextNode(myCss));

head.appendChild(style);

<h2>Styled with js</h2>

See also this CodePen Demo.

---

Note: If you want to support IE or obscure browsers, you might not want to use es6 template literals.

If that's the case, you can simply make a string of css:

var myCss = "* {background: blue;} h2 {background: #333; color: red;}";

or you can concatenate the string on multiple lines.

var myCss = 
  "* {background: blue;} " +
  "h2 {background: #333; color: red;}";

---

You could use your original code as well and set your css string in the backtick syntax.

The problem is that your code will insert the styles into the body. This can produce a flash of unstyled content - see this answer for more information.

Therefore I recommend inserting the styles into the head, which the code above does.

---

Solution 2:

Try myCss.setAtrribute("style","color: blue !important; background: white !important; display: block;");

Solution 3:

As you are using array of string to set innerHTML, so you will require array index. Try using: myCss.innerHTML = cssArray[0];

Solution 4:

Just join the array strings before passing it to innerHTML.

var cssArray = ["
   * {color: blue !important}
   * {background: white !important}
   #myId {display: block}
   .myClass {display: inline-block}
"];

var myCss = document.createElement("style");
myCss.type = "text/css";
myCss.innerHTML = cssArray.join('');
document.body.appendChild(myCss);

Solution 5:

Please don't thumb up this answer. Thumb up Dan Kreiger's answer instead.

The following code is based on Dan Krieger's answer and is actually 99% like Dan's answer (I tried to suggest this as edit by my edit was rejected by the SE team so I publish in an answer).

It works fine also:

---

let myCss =`
   .site_mainTable > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(4) {display: none}
   .site_mainTable > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) {display: none}
   gallery-banner, .gallery-banner-gl {display: none}
`;

style = document.createElement("style");
style.type = "text/css";
style.styleSheet ? style.styleSheet.cssText = myCss : style.appendChild(document.createTextNode(myCss) );
   // IF... style tag has a styleSheet, put its cssText as myCSS. ELSE... createTextNode with the contents of myCSS for later use. 

head = document.head || document.getElementsByTagName("head")[0];
head.appendChild(style);

---

All credit to Dan Kreiger.