動的コンテンツのCSS

JavaScriptを使用してウェブページにコンテンツを追加しようとしています。問題は、IE（7）のCSSが動的に追加されたコンテンツに適用されないように見えることです。ここで動的コンテンツのCSS

はFFで..

<html> 
<head> 
    <style type="text/css"> 
    p.foo { color: #FF4400 ; background-color: #000000 } 
    p.bar { color: #FF0000 ; background-color: #000000 } 
    </style> 
    <script type="text/javascript"> 
     function add() { 
      var node = document.createElement("p"); 
      node.setAttribute("class", "bar"); 
      node.appendChild(document.createTextNode("New Content")); 
      document.body.appendChild(node); 
     }; 
    </script> 
</head> 
<body onload="add()"> 
     <p class="bar">bar</p> 
     <p class="foo">foo</p> 
</body> 
</html>

ドキュメント例ですが、新しく追加された「新コンテンツ」段落は、それに適用されるスタイルを持っていますが、IEで、それはしていません。これは簡単に検索可能でなければならないほど明らかなもののようですが、明白な検索クエリでは何も表示されませんでした。

だからトリックは何ですか？

出典

2009-03-09 Afton

なぜフレームワークを使用する、などjQuery、MooTools、extJs、Dojo、Prototypeなど、すでにこれらの問題のすべてを解決したこと？

しかし、あなたはそれを自分で行う上で主張すれば、使用してみてください：

function add() { 
     var node = document.createElement("p"); 
     node.className = 'bar'; // <- use in leu of setAttribute() 
     node.appendChild(document.createTextNode("New Content")); 
     document.body.appendChild(node); 
    };

出典

2009-03-09 01:08:31 tvanfosson

あなたはすでに、これらの問題のすべてを解決したフレームワーク（複数可）の名前を共有していただけますか？ – overslacked

jQueryは1です。私はYUI、Dojo、Mootools、Prototypeもそれを解決したと確信しています。 –

ほぼすべてのjavascriptフレームワークは、このようなブラウザ間の問題を処理します。私はjQueryを使用していますが、プロトタイプ/スクリプト、mootools、extjsなどを見ることもできます。 – tvanfosson

動的コンテンツのCSS

答えて

関連する問題