Question

我正在尝试开发Firefox插件/ Chrome扩展程序。如何在不受CSS影响的情况下将新DOM节点插入任意页面的任意位置？

看一下这个演示：http://jsfiddle.net/za5cop0e/1/。如果网页以某种方式修改某个节点下的所有div的样式（例如display: none），并且我在不知道display被修改的情况下插入了我的div，我的div将不会表现为我期待。

我能想到的一个解决方案是使用默认值覆盖所有标准CSS样式，这是不可接受的。是否有更优雅的方法，例如，document.createElement('div', false)，其中第二个参数向浏览器指示此节点不从祖先继承任何CSS样式。

Answer 1

您可以将自己的css嵌入到要附加的DOM元素中。

因此，对于DOM元素，您可以为那个将覆盖任何其他DOM的DOM添加css，因为内联CSS优先于其他人

http://jsfiddle.net/za5cop0e/4/

var s = document.createElement('style')
s.textContent = 'div { display: none }'; // problematic CSS
document.head.appendChild(s);

// expect to show a black block, but will not show due to the CSS style above
var d = document.createElement('div');
d.style.backgroundColor = 'black';
d.style.width = '100px';
d.style.height = '100px';
d.style.display = 'block'; // here
document.body.appendChild(d);

使插入的DOM节点不受CSS影响

1 个答案: