Question

I am trying to create a div element which shows some text as popup. But the problem is when i create the element using javascript, the div already contains the default style which is defined in document style sheet or external css. Like for example:

popup = document.createElement("div");
popup.setAttribute("id","myElement");
popup.style.left = "100px";
popup.style.top = "100px";
popup.style.width = "100px";
popup.style.height = "100px";
document.body.appendChild(popup);

and now when it shows up, it already has colors, borders etc because in css there is this div style which is being applied on this element. I want it to not inherit anything which is defined for the document itself, how can i do that, or may be overwrite the original style??

Answer 1

So I made something like this. It may not be ideal solution but it atleast does what i wanted:

function displayMenu(){ 
    var popup;

    //see if there is already default style defined in the document
    var styleSheets = document.styleSheets;
    var size = styleSheets.length;
    var cssRules = new Array();
    var rules = "";
    var css, len, st, sp;

    for (i=0;i<size;i++){
        cssRules[i] = styleSheets[i].rules || styleSheets[i].cssRules;
        for (j=0;j<cssRules[i].length;j++){
            if(cssRules[i][j].cssText.search(/div/i) != -1){
                css = cssRules[i][j].cssText;
                css = css.substr(((css.search("{"))+1),((css.search("}"))-(((css.search("{"))+1))));

                if((css.search("{") == -1) && (css.search("}") == -1)) {
                    //no of css-properties in this specific rule
                    len = css.split(";").length - 1;

                    for (k=0;k<len;k++){
                        st = css.search(";") + 1;
                        rules += css.substr(0,(css.substr(0,st).search(":")+1)) + "0\n";
                        css = css.substr(st);                       
                    }

                } else {} //ignore this rule
            }
        }
    }

    var reset = '.myStyle { '+ rules +' }\n';

    //now create a css Class which overwrite default document properties for this <div> element
    var myStyle = document.createElement('style');
    myStyle.type = 'text/css';
    //TODO: should be replaced with style from arguments
    myStyle.innerHTML = reset;
    document.getElementsByTagName('head')[0].appendChild(myStyle);

    //start creating the popup menu:
    var popup;
    popup = document.createElement("div");
    popup.setAttribute("id","guide_popup");
    popup.setAttribute("class","myStyle");

    //now define own style rules: (All basic properties need to be defined as there is none by defualt now)
    popup.style.top = top;
    popup.style.left = left;
    popup.style.width = width;
    popup.style.height = height;
    popup.style.zIndex = index;

    //TODO: should be replaced with str in aruguments
    var popup_text = document.createTextNode("This is my sample text");
    popup.appendChild(popup_text);

    //finally process the DOM
    document.body.appendChild(popup);

}