如何防止CSS影响某些元素？

Question

我正在编写一个GreaseMonkey脚本，该脚本有时会创建一个模态对话框–类似

<div id="dialog">
   Foo
</div>

。 但是，如果该网站有类似的内容，该怎么办

#dialog {
    display: none !important;
}

？ 或者，某些网站的所有者偏执狂，并且拥有类似

div {
    display: none !important;
}
div.trusted {
    display: block !important;
}

因为他不希望像我这样的人在他的页面上添加不受信任的内容。 如何防止这些样式隐藏对话框？

我的脚本在所有页面上运行，因此我无法将代码适应每种情况。

有没有办法将对话框沙箱化 ？

Answer 1

实际上是一个非常有趣的问题，这是另一种方法：

添加iframe并对其进行修改会为您创建一个单独的CSS空间（您的沙箱）

看看这个jsfiddle示例： http : //jsfiddle.net/ZpC3R/2/

var ele = document.createElement("iframe");
ele.id = "dialog";
ele.src = 'javascript:false;';
ele.style.height = "100px";
ele.style.width = "300px";
ele.style.setProperty("display", "block", "important");
document.getElementById("dialog").onload = function() {
    var d = document.getElementById("dialog").contentWindow.document;
    // ... do your stuff within the iframe
};

这似乎在Firefox中没有问题的工作。

现在，您只需要确保iframe未被触碰，就可以按照我在1.答案中描述的方式进行操作。

Answer 2

像这样创建div：

var ele = document.createElement("div");
ele.style.setProperty("display", "block", "important");

应该会覆盖所有其他样式的afaik。

看看这里，它似乎可以工作： http : //jsfiddle.net/ZpC3R/