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

Question

我正在尝试开发 Firefox 插件/Chrome 扩展。如何在任意页面的任意位置插入一个新的 DOM 节点而不受其 CSS 的影响？

看看这个演示:http://jsfiddle.net/za5cop0e/1/ .如果网页以某种方式修改了某个节点下所有div的样式(例如display: none)，而我在不知道display是修改后，我的 div 将不会像我预期的那样运行。

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

Answer 1

您可以将自己的 css 嵌入到要附加的 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);