JavaScript で動的に追加したタグにスタイルシートが適用されない

Ajax プログラミングなどで、JavaScript を利用して後から動的にタグを追加したり変更したりした場合に、そのタグに設定したクラス名に対応するスタイルシートが適用されない場合がありました。

Safari や Google Chrome では CSS が正しく適用されているのに、Internet Explorer (IE8) でだけ、スタイルシートで指定した書式が適用されていない感じです。

 

調べてみるとその原因は、タグに対するクラス名の指定を "targetNode.setAttribute('class', クラス名)" で行っていることが間違いだったようでした。

この方法でクラス名を設定したタグを appendChild で追加しても、Internet Explorer に限っては、クラス名が設定されてないタグが追加されたものとされてしまう様子です。

ちなみに getAttribute('class') とした場合も、Internet Explorer に限っては、クラス名を取得することができませんでした。

 

Internet Explorer でクラス名を設定する場合には、次のようにする必要があります。

このようにすることで、Internet Explorer でもクラス名が正しく設定され、そのタグが appendChild で文書に追加されれば、適切な CSS の書式で表示されるようになりました。

この className プロパティは Safari や Google Chrome でも使用可能のようなので、クラス名の取得や設定を行う場合には getAttribute('class') や setAttribute('class', VALUE) は使用しないで、className プロパティの読み書きに統一しておく必要がありそうです。