document.write 样式 css javascript答案

【问题标题】：document.write style css javascriptdocument.write 样式 css javascript
【发布时间】：2012-11-06 21:44:16
【问题描述】：

我从数据库中提取了一些 html 和 css，它恰好包含一些包装在样式标签中的 css。然后我将一些 innerhtml 设置为字符串变量并显示它。

html 被正确渲染，但 ie 不会显示带有 css 的内容 - 当然 firefox 会。下面是代码的缩略示例

var outputString = '<style type="text/css">.fontRed{color:red;}</style><span class="fontRed">red</span>'

然后我将它设置为innerHTML

document.getElementById('bilbo').innerHTML = outputString;

这在 FF 中正确显示（红色），但在 IE 中不正确。是否有我需要为 IE 转义的角色？其余的 html 可以正常工作，甚至内联样式在 IE 中也可以正常工作。

欢迎任何帮助。

谢谢

【问题讨论】：

如果您在 IE 中描述它做了什么，将会有所帮助。顺便说一句，使用像 .fontRed {color:red;} 这样的样式完全忽略了 CSS 的意义。
我给出了一个简短的代码 sn-p。 outputString 设置为从数据库中提取的 CLOB，在这种情况下，它是一个文本填充的网页，用于解释某些内容。我想按原样显示页面。它在 FF 中正确显示，而不是在 IE 中，即 css 部分不会在 IE 中呈现。
拉取的代码不是我写的网页，实际上只是一大堆用户协议文本。所以我必须使用我得到的东西...... IE 中的代码在没有 css 的情况下呈现，在示例中，文本将是黑色的，而不是红色的。 IE 不识别样式标签之间的任何内容

标签： javascript html css innerhtml

【解决方案1】：

试试这个方法 .. 在 IE7 及更高版本中测试

// Create the Style Element
var styleElem = document.createElement('style');
styleElem.type = 'text/css' ;

var css = '.fontRed{color:red;}' ;

if(styleElem.styleSheet){
    styleElem.styleSheet.cssText = css;
}
else{
    styleElem.appendChild(document.createTextNode(css));
}

// Append the Style element to the Head
var head = document.getElementsByTagName('head')[0] ;
head.appendChild(styleElem);

// Append the span to the Div 
var container = document.getElementById('bilbo');
container.innerHTML = '<span class="fontRed">red</span>' ;

Check FIDDLE

【讨论】：

【解决方案2】：

首先将<style type="text/css">.fontRed{color:red;}</style> 附加到head 标签。

【讨论】：

【解决方案3】：

只需将<body> 放在输出字符串的开头即可。即

document.getElementById('bilbo').innerHTML = '<body>' + outputString;

请参阅http://jsfiddle.net/ScEZ4/1/ 以获得工作演示。

经过测试和工作的 IE6、IE7、IE8、IE9、FF16、Chrome22、Opera12

【讨论】：