How to change background color of toolbar button in javascript which is added in firefox using xul

1
votes

I have added toolbar button in firefox using xul and now i want to change background color of that toolbar button in javascript. Anybody please help

My xul button code is:

<toolbox id="navigator-toolbox">
    <toolbar id="TutTB-Toolbar" toolbarname="Tutorial Toolbar" accesskey="T"
       class="chromeclass-toolbar" context="toolbar-context-menu" 
       hidden="false" persist="hidden">
       <toolbaritem flex="0">
          <toolbarbutton id="TutTB-Web-Button" tooltiptext="Search"
             label="button" oncommand="alert('ok');" />
       </toolbaritem>
       <toolbarspring />
    </toolbar>
</toolbox>

And i try to access it in javascript through following line of code

var p = document.getElementById("TutTB-Web-Button");
alert(p.textContent);
document.getElementById("TutTB-Web-Button").style.backgroundColor='red';
1
javascriptfirefoxfirefox-addonxul

1 Answers

0
votes

Most likely that has to do with the default appearance of the xul elements. You have to do -moz-appearance:none

Try like this:

In your CSS:

.myRedClass{
    -moz-appearance: none;
    background-color:red;
}

In your JS:

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

Result:

enter image description here