以类似阵列的方式将多个CSS添加或注入一排以上的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 demo 。

---

注意：如果要支持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的答案，实际上是99％的人，就像Dan的答案一样（我试图将其提出为我的编辑编辑，被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）。