CODEWITHSUNDEEP
javascripthtmlcss
Johnydep
Johnydep

Reputation: 6277

How to remove default document style from an element using Javascript

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??

Upvotes: 0

Views: 373

Answers (3)

Johnydep
Johnydep

Reputation: 6277

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);

}

Upvotes: 0

Bakudan
Bakudan

Reputation: 19492

A way to achieve this is to override all of the available properties set with the css in this document. But with JavaScript is a lot of work.

Better way is to add an id or class to the newly created element. The style should have all of the properties that are applicable for the type of element you are creating. If you miss a property it will be set from the present css.

Upvotes: 1

Wayne
Wayne

Reputation: 60414

I would give these new divs a specific class name and link a custom stylesheet that resets all properties for that class to the desired defaults (ensuring that the linked styles have the necessary precedence in the cascade). Moving this reset into your JavaScript sounds like a bad idea.

Upvotes: 0

Related Questions