How can I prevent CSS from affecting certain element?

Question

I am writing a GreaseMonkey script that sometimes creates a modal dialog – something like

   F         


        
                      

              相关标签:
       
      

Answer 1

Actually a very interessting problem, here is another approach:

adding an iframe and modifying it creates a seperate css space for you (your sandbox)

look at this jsfiddle example: 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
};

this seems to work without problem in firefox.

now you only have to make sure that the iframe is untouched, you can do this they way i described in my 1. answer

Answer 2

just create the div like this:

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

that should overwrite all other styles afaik.

look here, it seems to work: http://jsfiddle.net/ZpC3R/