Question

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

html正确呈现，但是不会显示带有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中也能正常工作。

非常欢迎任何帮助。

由于

Answer 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

Answer 2

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

Answer 3

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

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

有关正常工作的演示，请参阅http://jsfiddle.net/ScEZ4/1/。

测试并使用IE6，IE7，IE8，IE9，FF16，Chrome22，Opera12

document.write style css javascript

3 个答案: