动态内部样式不覆盖外部样式答案

【问题标题】：Dynamic Internal Styles not Overwriting External Styles动态内部样式不覆盖外部样式
【发布时间】：2015-04-15 20:08:15
【问题描述】：

我在我的 html 页面中使用如下标签链接了一个外部样式表，

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

有样式，

.myDiv{height:200px;}

在读取文档时，我正在创建一些样式并将其作为内部样式表附加到头部，例如，

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

正确应用了新样式的宽度，但高度仅反映在 IE8 浏览器上。对此有何建议？

【问题讨论】：

本地主机站点运行正常，但在实时服务器站点中运行正常

标签： html css

【解决方案1】：

提到!important 的身高怎么样？

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

希望这会奏效。

【讨论】：

是的，它工作正常。不添加“！important”在本地主机上工作正常，但在实时服务器中工作不正常
好的。但是您的意思是即使添加了!important，它也无法在实时服务器中运行？
添加 {!important} 后，它在本地和现场都可以正常工作。

【解决方案2】：

在页面 DOM 结构中发现错误。脚本标签未正确关闭。

【讨论】：