Javascript 如何在mozilla firefox扩展中更改自定义工具栏按钮的颜色

我提供了自定义工具栏按钮（我在overlay.xul中创建了该按钮）javascript开头的颜色然后我在脚本中更改了它的颜色，但问题是，当我打开一个新选项卡时，工具栏按钮的颜色不会恢复到它的第一种颜色，或者换句话说，所有脚本都可以工作，但代码的颜色更改行不起作用，我在开始时给出了，但它仍然是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;

} 

---

在添加红色类时，是否尝试删除蓝色类

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

---

这可以在不使用javascript的情况下修复

由于您希望

myRedClass

覆盖

myblueclass

，因此应该重新排列css，以便最重要的选择器出现在最后

.myblueclass{
    ...
} 

.myRedClass{
    ...
}