cssTextのクロスブラウザ対策

cssTextの挙動の違い

HTMLのDOM要素には、DOM要素内に含まれるテキストをinnerHTMLというプロパティによって扱うことができます。これと同様にDOM要素に適用されているスタイルシートをテキストとして扱えるcssTextというプロパティがあります。詳しい説明は、基本的な使い方については、amachangさんのところや、gan2のRuby勉強日記をご覧ください。今回、cssTextのブラウザによる挙動の違いを発見したので、報告しておきます。

テスト用のコード

以下のコードをいろんなブラウザで実行してみます。これを実行すると、cssTextの値がアラートとして表示されます。

var element = document.createElement("div");
element.style.color="red";
alert(element.style.cssText);

firefox3.5とChromeの場合

color: red;

IEの場合

COLOR: red

違いはセミコロン

違いはセミコロンがついているかどうかです。これは以下のような場合に困ります。

var element = document.createElement("div");
element.style.color="red";
element.style.cssText+="width:100px";
alert(element.style.cssText);

ここでは、既存のcssTextの内容に幅100pxという情報を書き込もうとしています。しかし、IEの場合、セミコロン(;)がついていないためこれが正しく解釈されません。

対策

element.style.cssText+=";width:100px";

widthの前にセミコロンをつけることでこの問題を解決することができます。FirefoxやChromeの場合、セミコロンが二つ続けて書かれることになりますが、cssの書き方として問題ありません。