如何更改＃new-Quote:在使用jQuery或JavaScript的背景之前

Question

我想知道如何更改＃new-Quote的背景：元素之前，因为使用此线程中的信息：更改A：更改a：在使用jquery之前的css selector之前，我了解到，我们只能使用CSS的特殊技术和内容属性来进行。但是CSS的其他属性（例如背景）呢？

 colors = [
  "#ff9966",
  "#7f00ff",
  "#396afc",
  "#0cebeb",
  "#06beb6",
  "#642b73",
  "#36d1dc",
  "#cb356b",
  "#3a1c71",
  "#ef3b36",
  "#159957",
  "#000046",
  "#007991",
  "#56ccf2",
  "#f2994a",
  "#e44d26",
  "#4ac29a",
  "#f7971e",
  "#34e89e",
  "#6190e8",
  "#3494e6",
  "#ee0979"
],
randomNumber = Math.floor(Math.random() * colors.length);

我用于项目的是：

var addRule = function(sheet, selector, styles) {
if (sheet.insertRule) 
  return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule)
  return sheet.addRule(selector, styles);
}
addRule(document.styleSheets[0], "#new-quote:before", "content: colors[randomNumber]");

是的，它可以与内容属性一起使用，但是背景呢？

addRule(document.styleSheets[0], "#new-quote:before", "content: colors[randomNumber]");

nope :(这是我的完整项目代码的Codepen：

请参阅codepen上的lukas（@kestis500）的笔xpgbnv。

---

这条代码已修复了所有内容！：）

$('head').append("<style>#new-quote:before{background:"+ colors[randomNumber] + ";}</style>");

Answer 1

您可以使用自定义CSS颜色创建一个样式标签，并将其附加到头

请参阅示例

colors = [
  "#ff9966",
  "#7f00ff",
  "#396afc",
  "#0cebeb",
  "#06beb6",
  "#642b73",
  "#36d1dc",
  "#cb356b",
  "#3a1c71",
  "#ef3b36",
  "#159957",
  "#000046",
  "#007991",
  "#56ccf2",
  "#f2994a",
  "#e44d26",
  "#4ac29a",
  "#f7971e",
  "#34e89e",
  "#6190e8",
  "#3494e6",
  "#ee0979"
],
randomNumber = Math.floor(Math.random() * colors.length);
$('head').append("<style>.div1:before{background:"+ colors[randomNumber] + "}</style>");

.div1:before {
  content: 'before  ';
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">container2</div>