插入的DOM节点不受CSS影响

Make inserted DOM node not affected by CSS

本文关键字：CSS 影响 节点 DOM 插入      更新时间：2023-09-26

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

看一下这个演示:http://jsfiddle.net/za5cop0e/1/。如果网页以某种方式修改了某些节点下所有div的样式(以display: none为例)，并且我在不知道display被修改的情况下插入了我的div，那么我的div将不会像我期望的那样运行。

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

你可以把你自己的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);
相关文章：