CODEWITHSUNDEEP
htmlcss
sureshunivers
sureshunivers

Reputation: 1753

Dynamic Internal Styles not Overwriting External Styles

I have linked an external style sheet in my html page using tag like below,

<link href="CSS/master.css" rel="stylesheet" type="text/css" media="screen" />

which has styles,

.myDiv{height:200px;}

On document read I am creating some styles and append it as internal style sheet in head section like,

    var styles = ".mydiv{height:350px; width:300px;}";
    var headID = document.getElementsByTagName("head")[0];
    styleNode = document.createElement("style");
    styleNode.setAttribute("type", "text/css");
    styleNode.setAttribute("id", "game_style");
    headID.appendChild(styleNode);

    if (styleNode.styleSheet) {// IE
        styleNode.styleSheet.cssText = styles;
    } else {// the world
        var textNode = document.createTextNode(styles);
        styleNode.appendChild(textNode);
    }

the new style width is applied correctly but the height is not reflected on IE8 browsers only. Any suggestions on this?

Upvotes: 0

Views: 40

Answers (2)

sureshunivers
sureshunivers

Reputation: 1753

Found error in page DOM structure. script tag not closed properly.

Upvotes: 0

Prasad G K
Prasad G K

Reputation: 136

what about mentioning the !important for height?

var styles = ".mydiv{height:350px !important; width:300px;}";

Hope this will work.

Upvotes: 1

Related Questions