以类似数组的方式使用香草Javascript添加或注入多行CSS

Question

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} ";
document.body.appendChild(myCss);

This code works but I need a way to insert a few rows of CSS code, instead just one.

I tried this instead, but didn't work:

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;
document.body.appendChild(myCss);

I went through many SE QA sessions and all I found deals with adding a single CSS row as I used above. If there is no way to inject several CSS rows in one command, is there any "dirty" workaround you know?

Answer 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` syntax var 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.

---

Answer 2

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

Answer 3

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

Answer 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);

Answer 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.