如何在Mozilla FireFox扩展程序中更改自定义工具栏按钮的颜色

Question

我在javascript开头给了自定义工具栏按钮（我在overlay.xul中创建的）一种颜色，然后我在脚本中更改了它的颜色，但是问题是当我打开一个新选项卡时，工具栏按钮的颜色不会恢复到它的第一个颜色颜色或换句话说，所有脚本均可工作，但我在开始时给出的颜色更改代码行不起作用，但仍为myblueclass颜色。

window.addEventListener("DOMContentLoaded", function(e) {
    document.getElementById("TutTB-Web-Button").classList.add('myRedClass');

并在特定网页上的特定事件下运行以下代码行。

document.getElementById("TutTB-Web-Button").classList.add('myblueclass');    

CSS代码是：

.myRedClass{
   -moz-appearance: none;
    width: 100px;
    height: 20px;
    margin-bottom:3px;
    margin-left: 90px!important;
    background-color:#FF0000;
    color:#000000;
    font-weight:bold;
    /*border:2px solid #FFFFFF!important;*/
    border-radius: 5px !important;
    /*box-shadow: 5px 5px 5px  #888888!important;*/
        font-family:Arial, Helvetica, sans-serif;

}
.myblueclass{
    -moz-appearance: none;
    width: 100px;
    height: 20px;
    margin-left: 40px;
    background-color:#0000FF;
    color:#FFFFFF;

} 

Answer 1

添加红色的类别时，您是否尝试过删除蓝色的类别？

window.addEventListener("DOMContentLoaded", function(e) {
    var cList = document.getElementById("TutTB-Web-Button").classList;
    cList.remove('myblueClass');
    cList.add('myRedClass');
}

Answer 2

无需使用JavaScript也可以解决此问题。

由于您希望myRedClass覆盖myblueclass ，因此应重新排列css，以便最重要的选择器出现在最后。

.myblueclass{
    ...
} 

.myRedClass{
    ...
}