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

我寫Greasemonkey的腳本，它有時會造成一個模式對話框 - 像如何防止CSS影響某些元素？

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

。但我能做些什麼，如果該網站有類似的東西

#dialog { 
    display: none !important; 
}

？或者一些網站的所有者是偏執的，具有類似

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

，因爲他不希望我這樣的人加入不可信的內容，以他的網頁。我如何防止這些樣式隱藏我的對話框？

我的腳本在所有頁面上運行，所以我無法使我的代碼適應每種情況。

有沒有辦法沙箱我的對話框？

來源

2013-07-01 Oriol

其實很interessting問題，這裏是另一種方法：

添加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回答

來源

2013-07-01 15:41:53 x4rf41

可能會有問題，如果你有很多litte div盒（比如你想給bbs的每個帖子添加一些東西，我不知道有多好的瀏覽器處理了很多iframes。但似乎沒有另一種方式來重寫！重要樣式沒有內聯樣式 – x4rf41

感謝您的警告，但我只需要一個iframe，所以沒問題 – Oriol

剛剛創建這樣的DIV：

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

應該AFAIK覆蓋所有其他樣式。

看這裏，似乎工作：

來源

2013-07-01 14:58:10 x4rf41

很好的描述，你是對的。帶有'！important'的嵌入式框架，我可以覆蓋所有內容。但是，我應該重置我的對話框中所有元素的所有屬性......並且我應該進行一些檢查，例如，我應該在對話框內設置「display：inline」而不是「block」到「」。 – Oriol

唯一的解決辦法是修改樣式類，但是會打破頁面設計，你基本上需要一個完全與CSS分離的div盒。也許看看一個常見的reset.css並編輯所有的類如下：'span {..}'到'#yourdiv span {..}'。你的主要（包裝）div的ID應該是非常獨特的（一些長散列或如此）。也許那個作品 – x4rf41

這可能是一個很好的解決方案。但這並不完美。例如：http://jsfiddle.net/qffHb/ – Oriol

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

回答

相關問題