Question

我给了自定义工具栏按钮（我在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;

}

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{
    ...
}

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

2 个答案: