Question

我正在开发一个firefox扩展，我需要做的一件事就是在dom中添加一个元素。我对此没有任何问题，只是我注意到这个元素从xul.css继承了一些样式，这是我想要避免的（而只是使用原始页面使用的样式）：

代码非常简单：

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

并且使用firebug我可以看到它使用

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

那么如何让元素不使用上面的css？

由于

Answer 1

那是因为你创建了一个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");

Answer 2

当您有多个样式表时，可以覆盖另一个样式表。上面的代码是一个捕获所有特定样式的部分或整个页面中的所有元素。唯一的方法是在创建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

在浏览器扩展中创建元素会继承浏览器css吗？

2 个答案: