御玉杓子スパイラル

Opera の cssText

javascript

firefox とかで, cssText に += して更新したとき, 更新した内容をパースして一旦プロパティを更新してから, 取得するときには再び自身のプロパティより構築するようなのだけれど, opera の場合, cssText は,保存されていて, 取得するときにはそれがそのまま使われるらしい.

いや, そのままと言うのもちょっとヘン. なんかよくわからないけれど, 末尾のセミコロンは消されてしまうし. ともかく cssText に += を繰り返すと, opera の場合はどんどん追加されていってしまう.

その結果どうなるかと言えば, cssText 用に割当てられたバッファを使い切り, オーバーフローはしないけれど, それ以降の cssText への追加は, 奇妙に途切れた cssText によるスタイルの変更と見做されるようになるらしい.

試しに

var div = document.createElement('div');
var s = div.style;
s.cssText="";

for(var i=0;i<274;i++){
  s.cssText += ';width: 1000px;';
}
document.write(s.cssText);
alert(s.cssText.length);

こんなのを走らせてみた. エラーコンソールから, cssの警告がでることが確認できた. ダイアログに表示された数字は, 4093 だけれど, 画面上に表示された cssText の内容はエラーコンソールに出たエラー部分は消えていたので, バッファの大きさは終端文字を抜いて 4096バイトらしい.

しかし, この問題, 強制的にプロパティをセットしなおしたらなんとかなるんじゃないかしらと, document.write の直前に, s.width = s.width ; としても結果は変わらず. また, s.width = '0px' としてみたら, くそ長い cssText の一番最後の width だけが置きかわっていた.

どうも, opera でスタイルを操作するのがクソのろいのだけれど, もしかして, opera の style って cssText を管理する為のもので要素の視覚情報を操作するものとはオブジェクトのプロパティを介してではなく cssText を介して値を渡してるのじゃないかしら……

ともかく, 再フローを防ぐ為に, cssText に += するってのはあまり使えないらしく, 正規表現やらでちゃんと内容を管理してやるか, 属性を一気に更新するようにしたほうがいいらしい.

Permalink | コメント(0) | トラックバック(0) | 04:24