javascript - 如何使用xul在firefox中添加的javascript中更改工具栏按钮的背景颜色

Question

我已经使用 xul 在 Firefox 中添加了工具栏按钮，现在我想在 javascript 中更改该工具栏按钮的背景颜色。有人请帮忙

我的 xul 按钮代码是:

<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>

我尝试通过以下代码行在 JavaScript 中访问它

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

Answer 1

这很可能与 xul 元素的默认外观有关。你必须做 -moz-appearance:none

尝试这样:

在你的 CSS 中:

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

在你的 JS 中:

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

结果: