Javascript:更改id中的css子节点

Question

也许答案比较简单，但我刚开始使用 Javascript，似乎无法实现我的目标:

我有这段 CSS 代码:

#tabmenu li a {
background: #ACBACF;
}

现在我想更改背景，但不仅仅是#tabmenu、li 或a，而是所有这些。我如何使用 Javascript 执行此操作？

编辑:这是一个带背景的按钮，我想知道如何更改 css 部分的值。所以它不仅是背景，还有填充和东西，但为了简单起见，假设我只想用 javascript 更改背景。

HTML:

<ul id="tabmenu">
       <li>
           <a href="#index">Home</a>
      </li>
</ul>

编辑 2:我无法更改 HTML 或 CSS，因为我想创建一个用户脚本 (Greasemonkey)。

Answer 1

我不认为直接从 Javascript 设置 css 是最好的方法。它会导致大量内联代码，并且不能很好地与您在外部文件中定义的样式配合使用。如果你要对 css 进行大量修改，我建议在 dom 中注入(inject)一个自定义样式标签:

var style = document.createElement("style")
style.setAttribute("type", "text/css");
style.innerHTML = "#tabmenu li a {\
    background: red;\
}";
document.getElementsByTagName("head")[0].appendChild(style)

在使用多行字符串值时，Javascript 需要行尾的“\”。

最后，如果你遵循这条路线，我建议在文本编辑器中编写 css 代码，然后用类似 https://csscompressor.net/ 的东西打包它。 (这会给你一个单行字符串)并将结果复制粘贴到括号之间。