2

データベースから少しの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で正しく機能します。

どんな援助でも大歓迎です。

ありがとう

4

3 に答える 3

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>' ;​

FIDDLEを確認してください

于 2012-11-06T21:59:16.263 に答える
1

<style type="text/css">.fontRed{color:red;}</style>最初にヘッドタグにを追加します。

于 2012-11-06T22:11:57.720 に答える
0

<body>出力文字列の先頭に置くだけです。すなわち

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

動作するデモについては、http：//jsfiddle.net/ScEZ4/1/を参照してください。

テスト済みで動作しているIE6、IE7、IE8、IE9、FF16、Chrome22、Opera12

于 2012-11-06T22:51:30.653 に答える