使用 javascript 编辑 .css（带括号）

Question

我看到一些线程在谈论这个，但是当你的 .css 中有括号时，我没有看到任何人如何更改 .css

我的标题中有一个 .css，我想让我的用户能够更改背景颜色和文本颜色。

在我的网站中使用检查器我检测到哪些 CSS 片段可以做到这一点。

颜色文本在这个 .filepond--file 中：

.filepond--file {
  position: static;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0.5625em 0.5625em;
  color: #fff;
  border-radius: 0.5em;
}

背景在这里：

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
  background-color: #369763;
}

我应该如何使用 javascript 更改这两个东西的颜色？ 谢谢！

Answer 1

您不需要编辑 css 样式表。 可以在页面中添加自己的样式元素，可以覆盖之前的样式。

例如

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.filepond--file { color: #F00 !important; }';
style.innerHTML = '[data-filepond-item-state='processing-complete'] .filepond--item-panel { background: green !important; }';
document.getElementsByTagName('head')[0].appendChild(style);

例如，如果您将以下代码复制粘贴到 StackOverflow 开发人员控制台中，它将使邮政编码变成黑色/白色。

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.prettyprint { color: white; background: black }';
document.getElementsByTagName('head')[0].appendChild(style);