在瀏覽器擴展中創建元素繼承瀏覽器的CSS？

我正在開發一個Firefox擴展，我需要做的事情之一是向dom添加一個元素。除了我注意到這個元素繼承了xul.css的一些樣式，這是我想避免的（而是隻使用原始頁面使用的樣式）：在瀏覽器擴展中創建元素繼承瀏覽器的CSS？

代碼是很簡單：

var span = document.createElement('span'); 
node.appendChild(span)

，並與螢火蟲，我可以看到它使用

* { 
    -moz-box-sizing: border-box; 
    -moz-user-focus: ignore; 
    -moz-user-select: -moz-none; 
    display: -moz-box; 
}

所以，我怎麼可以不使用上述CSS元素？

謝謝

來源

2011-11-19 Dan

那'因爲你創建了一個XUL元素，而不是一個HTML元素。 document你的情況是一個XUL文檔（瀏覽器窗口的文檔？），並且創建的元素的默認名稱空間是http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul。如果可能的話，你應該總是創建他們將被插入到文檔中的元素：

node.ownerDocument.createElement("span");

你也可以指定HTML命名空間中明確：

node.ownerDocument.createElementNS("http://www.w3.org/1999/xhtml", "span");

來源

2011-11-19 23:42:06

這正是問題所在。非常感謝！ – Dan

如果您有多個樣式表，可以重寫其他樣式表。上面的代碼完全可以將某個特定樣式放置在某個部分或整個頁面中的所有元素上。唯一的方法是在創建span元素後應用自己的樣式，最好是display：block;

你可以嘗試用下面的jQuery腳本創建它

span.setAttribute('id',"MyElement"); 
$('#MyElement').removeClass('*');

後刪除的造型，否則將不得不在與

span.setAttribute('id',"MyElement"); 
document.getElementById("MyElement").className = "predifinedClass";

或jQuery的

騎

span.setAttribute('id',"MyElement"); 
$('#MyElement').addClass('MyClass'); 
----- OR ----- 
$('#MyElement').css('display','block'); // to specify 1 css rule

來源

2011-11-19 23:42:03

'xul.css'是一個瀏覽器的內置樣式表。問題不在於壓倒它，而在於首先不適用它。 –

在瀏覽器擴展中創建元素繼承瀏覽器的CSS？

回答

相關問題