JavaScript を用いて <DIV> タグの配置位置を変更する
SPECIAL
<DIV> タグの配置位置を指定する
次の <DIV> タグが HTML に記載されているとします。
<div id="target_element"> </div>
この <DIV> タグの表示位置を設定するために、次のスタイルシートが定義されているとします。
div#target_element
{
position: absolute;
left: 40px;
top: 40px;
width: 300px;
height: 80px;
}
これにより、300x80 のサイズの DIV 領域が、画面の左から 40 ピクセル、上から 40 ピクセルのところに配置される形になります。
ここで、JavaScript による配置位置の変更を行いたいとします。
このとき、次のような JavaScript を実行することによって、DIV の配置位置を変更することが可能です。
なお、mousePositionX と mousePositionY は、それぞれ、現在のマウスカーソルの X 座標と Y 座標を数値で保持しているものとします。これについての具体的な方法については EZ-NET： JavaScript で現在のマウスカーソル座標を取得する の方で触れておくことにします。
var target;
// <div id="target_element"> オブジェクトを取得します。
target = document.getElementById('target_element');
// オブジェクトの座標情報を変更します。
target.style.left = mousePositionX + 'px';
target.style.top = mousePositionY + 'px';
ここで注意が必要なのが、どうやら .style.left や .style.top に設定する値には "10px" といったように、単位を付加したものを設定する必要があるところです。
Internet Explorer 8 では単に "10" といった感じでも配置位置を変更することができたのですけど、Firefox 3.5.5 や Safari 4.0.3 、Google Chrome 3.0 では、単位のない値を設定しても、配置位置が変更になることはありませんでした。
なお、その原因を調べている中で、あらかじめスタイルシートで left と top の値を設定しておかないと正しく動作しない場合があるとの情報もありましたが、少なくとも自分が試した環境では、スタイルシートでこれらを明示していなくても、JavaScript を用いて配置位置を変更することはできるようでした。