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

Question

我使用以下代码将网页中的所有文本设为红色：

var myCss = document.createElement("style");
myCss.type = "text/css";
myCss.innerHTML = " * {color: red !important} ";
document.body.appendChild(myCss);

这段代码有效，但是我需要一种方法来插入几行CSS代码，而不是只插入一行。

我尝试了一下，但是没有用：

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

我经历了许多SE QA会话，所有发现的事情都与我上面使用的添加单个CSS行有关。 如果无法在一个命令中注入多个CSS行，您是否知道任何“肮脏”的解决方法？

Answer 1

您可以根据需要在一个字符串中执行多行CSS。 您不需要数组即可执行此操作。

出于可读性考虑，您可以使用ES6模板文字设置多行样式字符串：

 // 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> 

另请参见此CodePen演示 。

---

注意：如果要支持IE或晦涩的浏览器 ，则可能不希望使用es6模板文字。

如果是这样，您可以简单地创建一串CSS：

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

或者您可以在多行上连接字符串。

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

---

您也可以使用原始代码，并在反引号语法中设置CSS字符串。

问题在于您的代码会将样式插入到主体中。 这可能会产生未样式化内容的提示 -有关更多信息，请参见此答案 。

因此，我建议将样式插入到上面的代码中。

---

Answer 2

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

Answer 3

当您使用字符串数组设置innerHTML时，将需要数组索引。 尝试使用： myCss.innerHTML = cssArray[0];

Answer 4

只需join数组字符串，然后再将其传递给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

请不要竖起这个答案。 改用Dan Kreiger的答案。

以下代码基于Dan Krieger的答案，实际上与Dan的答案相似，为99％（我试图建议这样做，因为我的编辑被SE团队拒绝，所以我在答案中发布）。

它也可以正常工作：

---

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

---

所有归功于Dan Kreiger。