前回はタイトなレイアについてでした。 今回は作成したレイアを自由な位置に配置するのに必要な、 レイアのサイズの取得に関する食えない事情です。

---

　みなさんは作成したレイアのサイズをどのように取り出しています？
最も一般的に見かける方法は

◆NN4 の場合

div.clip.width; (or Height)

◆IE4 の場合

div.style.posWidth; (or posHeight)

といったところでしょうか。

これは間違いではありませんが、IE4 の場合は条件付きです。
スタイルシートで

{ position:absolute; width:50%; height:20px; ... }

としてある場合は posWidth は 50、 posHeight は 20 という値になります。
つまり、指定した単位系での値になります。

NN4 の場合の width,height がピクセル単位で取得できることを考慮すると 汎用的な手法とはいえません。

では、単位系を揃えるために

div.style.pixelWidth; (or pixelHeight)

としてみましょう。

これも間違いではありませんが条件付きです。
つまり作成したレイアのスタイルシートで width,height を指定しない場合は 0 が、 指定したサイズに納まらず自動調整で大きくなった場合でも値は変わりません。

　つまり、style オブジェクトはユーザが設定した値そのもので、 現実のレイアを表わしてはいないのです。

現実のレイアのサイズを調べるには divオブジェクトのプロパティを使用します

div.offsetWidth; (or offsetHeight)	-	レイアのサイズ
div.clientWidth; (or clientHeight)	-	描画領域のサイズ( ボーダ枠内 )
div.scrollWidth; (or scrollHeight)	-	レイア内のドキュメントサイズ

これで完璧か？というとこれもまた条件があります。

1)

クリップされている場合は overflow を指定しないとscrollWidth/Heightと同じ ( offsetWidth はボーダサイズが含まれる )になります ( つまり、見かけのサイズではありません )。

2)

直前で div.style.*Width/*Height に書込んでいる場合は、 IE4 の構造的な理由で変更前の値のままです (一端ブラウザに制御を戻す必要があります)。

これは現実的に、完全に汎用的な関数などを記述することはできないことを意味します。

で、結局、何らかの制限をつけない限り完全に汎用的にサイズを取得する手法はありません。

あ〜っ、だんだんハラが立ってきた(怒)。

IE5 ではこのあたりは多少改善されたようですが、残念なことに IE4と、 かなり互換性がなくなっているようです。

1)

currentStyle,runtimeStyle が新設された
( 各オブジェクトに値を設定したときの相互の関連性は研究中 )

2)

style オブジェクトは初期値が設定されなくなった。
( runtimeStyle にすれば良いか？ )

3)

clientWidth などの値は style.pixelWidth などを書込むとその場で変わるようになった。
( ありがたい )

でも、やっぱり汎用的な関数は書けそうにありませんし、 IE4/5 を対象とする場合は 更にコードが汚くなりそうですが...

　単に作成したレイアの見かけのサイズが知りたいだけなのに、 これほど苦労するとは( これからも、改善されそうにないし )。 憤りさえ感じますね。

続きは、またもや頭を冷やしてからってことで... f(^^;;;