如何防止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/