How to change color of custom toolbar button in mozilla firefox extension

Question

I have given custom toolbar button (which i have created in overlay.xul) a color in start of javascript then i change its color in script but the problem is that when i opens a new tab the toolbar button color does not resume to its first color or in other words all script work but the color changing line of code does not work which i give in start but it remains myblueclass color.

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

and on certain event in specific web page the following line of code runs.

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

Css code is:

.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

Have you tried removing the blue class when adding the red one?

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

Answer 2

This can be fixed without using javascript as well.

Since you want the myRedClass to override myblueclass, you should rearrange your css such that the most important selector appears in the end.

.myblueclass{
    ...
} 

.myRedClass{
    ...
}