エレメントの枠をクリックして下さい。座標と、サイズを表示します。


エレメント1のstyle.topに座標を設定する
エレメント1のstyle.pixelTopに座標を設定する

エレメント2のstyle.widthにサイズを設定する
エレメント2のwidthにサイズを設定する
エレメント1
エレメント2



トラの画像のstyle.topに座標を設定する
トラの画像のwidthにサイズを設定する
トラの画像のstyle.widthにサイズを設定する

【わかった事】
■x座標の設定について(y座標も同様)
・x座標の設定はelement.style.leftに対して行う。
 このプロパティを読み出すと数値の後ろに"px"が付加されるが、設定するときは数値だけでよい。
 IEの場合は element.pixelLeftでも可。element.pixelLeftは読み出し時も"px"は付加されない。
  ※element.leftというプロパティはない。

■x座標の取得について(y座標も同様)
・x座標はelement.style.leftを参照する。IEの場合は element.pixelLeftでも可。
 element.style.leftは"150px"のように数値の後ろに"px"が付加される。これはIE5, NN6とも同じである。
 element.style.leftにJavascriptから値が設定されるまでは値は空(?)であり、element.pixelLeftは 0 である。一旦設定されると、
 正しい座標が読み出し可能となる。あるいは、HTMLタグの中にstyle属性でleftを記述することによりJavascriptから設定をしなくても
 読み出し可能となる。※CSSでの記述では読み出し可能とはならない。
IE5の場合は、element.pixelLeftも使えるがelement.style.leftに値が設定されるとelement.pixelLeftにも同じ値が設定される
(ただし、こちらには"px"は付加されない)。どちらかのプロパティが一旦設定されると、他方のプロパティも読み出し可能となる
(当然どちらの場合もエレメントは移動する)。

■幅の設定について(高さも同様)
・幅の設定はelement.style.widthに対して行う。
 座標同様、このプロパティにJavascriptから値が設定されるまでは値は空(?)である。一旦設定されると、読み出し可能となる。
 読み出すと"px"が付加されるが、設定するときは数値だけでよい。
 ※element.widthというプロパティはない。

■幅の取得について(高さも同様)
・幅はelement.style.widthを参照する。
 座標同様、このプロパティにJavascriptから値が設定されるまでは値は空(?)である。一旦設定されると、読み出し可能となる。
 あるいは、HTMLタグの中にstyle属性でwidthを記述することによりJavascriptから設定をしなくても読み出し可能となる。
 ※CSSでの記述では読み出し可能とはならない。
値は"150px"のように"px"が付加される。これはIE5, NN6で同じである。

■画像の座標について
 座標については上記と同様である。

■画像の高さの設定について(幅も同様)
・element.style.width, element.widthの2つのプロパティがある。
 どちらを使ってもサイズを変更することができるが、奇妙なことに一旦element.style.widthに値を設定するとelement.widthへ値を
 設定しても反映されなくなってしまう。この現象はIE5, NN6で同じである。

■画像の幅の取得について(高さも同様)
・element.style.width, element.widthの2つのプロパティがある。
・element.widthの方は、値を設定していない状態でもから画像のサイズを取得することができる("px"なし)。
 element.style.widthは、値が設定されるまでは値は空(?)である("px"付き)。
・設定で述べたように一旦element.style.widthに値を設定するとelement.widthへ設定できなくなるが、読み出しは可能で
element.style.widthに設定した値がelement.widthでも読み出せる。
※現象からして、element.style.widthに一旦値を設定するとelement.widthは読み出し専用になるようである。

■どう使うか
 読み出すためには画像のサイズを除けば、はじめに値を設定するか、HTMLタグ中で初期化する必要がある。
 スタイルをCSSで記述しているときに、読み出すエレメントだけHTMLタグに座標や、サイズを書くのは格好悪いし、メンテナンス性も
 損ねると思われるので、Javascriptで値を取得する場合はプログラムの先頭で値を書き込んで初期化するのがよいだろう。
 複数あるプロパティのうちどれを使うかということについては、IE5、NN6共通ということでelement.style.xxxがよいだろう(ただし、
 このプロパティは数値の後ろに"px"が付加されて読み出されるので、演算に使うときはparseInt()でこれを取り除くことを忘れないこと)。
 画像のサイズはあらかじめわかっていない場合もあるので、初期化する場合ははじめから値の読み出せるelement.widthで
 element.style.widthを初期化するか、element.widthだけを使用する。
 画像のサイズ変更は、element.style.widthに一旦値を設定するとelement.widthは読み出し専用になるため混在は許されず、どちらかに
 統一する必要がある。座標の読み書きにelement.style.xxxを使うのならば、サイズもelement.style.widthを使った方が一貫性があって
 よいように思うが、そうする場合は初期化が必要となることと、"px"をparceInt()で取り除くことが必要である。一貫性を気にしないならば
 element.widthを使用する。ただし、絶対にelement.style.widthに書き込まないこと。