Question

所以我使用以下代码在main.js中创建了一个面板：

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
   noautohide: true,
   noautofocus: false,
   backdrag: true,
   level: 'top',
   style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(0,0,0,0.3); border:none;'
}
for (let p in props) {
   panel.setAttribute(p, props[p]);
}
win.document.querySelector('#mainPopupSet').appendChild(panel);

panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2-256, screen.availTop+760);

我不太了解它是如何工作的，但它似乎是使面板透明化的唯一方法。我的问题是我想要设置这个面板及其内容的样式，所以我尝试了这个：

var panelStyle = win.document.createElement('link');
panelStyle.setAttribute('rel', 'stylesheet');
panelStyle.setAttribute('type', 'text/css');
panelStyle.setAttribute('href', 'custom_panel.css');
panel.appendChild(panelStyle);

custom_panel.css位于数据文件夹中，但似乎无法正常工作。

更新1： 根据Druzion的建议，我创建了p：

var p = win.document.createElement('p');
panel.appendChild(p);

和custom_panel.css是：

p
{
    background-color: red;
}

但是css似乎没有生效。

XUL面板css造型firefox sdk

0 个答案: