エレメントを操作する (3/5)
作成:2010-04-02 17:40
更新:2010-05-11 19:03
更新:2010-05-11 19:03
■位置・大きさの操作
スタイルシートでは、位置や大きさに関する属性も用意されています。それらも、もちろんエレメントのstyleプロパティに用意されています。主なものを整理すると、以下のようになります。
width――横幅
height――縦幅
top――縦位置（上からの距離）
left――横位置（左からの距離）
これらを設定することで、エレメントの位置や大きさを自由に設定できます。ただし！ ただ、これらの値を適当に変更したからといって、それだけでは位置や大きさは変わりません。いくつかポイントがあります。
・数値ではダメ！
これらの位置や大きさは、数値を使って指定しますが、しかし実は「数値を指定してもダメ」なのです。例えば、○○.style.width = 100; とやっても、大きさは変わりません。もし100ピクセルの大きさにしたければ、100ではなく、"100px"としなければいけません。
スタイルシートでは、これらの属性の値は数値ではなく「数値＋単位」のテキストとして設定されます。これは、エレメントでも同じです。数値の後に単位をつけたテキストで値を指定しなければいけません。
・positionの設定
大きさについてはこれで使えるようになりますが、位置に関しては、この他に「position」を設定しなければいけません。positionは、「その要素の位置をどのような形で決めるか」を設定するものです。これは、以下のいずれかに設定されます。
static
デフォルトの値です。静的な配置で、ドキュメントの中に、指定された位置に表示します。これを指定すると、スタイルをいくら変更しても位置はまったく変わらず、固定されたままです。
absolute
ボディの左上からの絶対位置で指定するものです。これを指定すると、その要素は他の要素との組み込み関係とは無関係に、独自に位置が指定されるようになります。top/leftを設定すると、ドキュメントの左上から指定されただけ離れた位置に表示されます。
fixed
ブラウザのウインドウの絶対位置で指定するものです。これを指定すると、（ドキュメントではなく）ブラウザウインドウの左上から指定された場所に表示されます。ウインドウからの絶対位置ですから、ドキュメントをスクロールしてもその要素はスクロールせず、指定した場所に表示され続けます。
relative
staticで本来の位置関係で表示される場所からの相対位置として指定するものです。absolute/fixedのように特定の場所からの絶対位置ではなく、あくまで「本来、ここに表示されるはず」という場所からの相対位置ですので、他の要素を操作するとそれにあわせて位置が移動したり調整されたりします。
では、実際にこれらを使って位置と大きさを操作したサンプルを下のリストにあげておきましょう。ページをロードした際、initial関数を実行して、ターゲットとなる<div>タグの位置と大きさを設定します。
ここでは、まず、target.style.position = "absolute";で表示位置を絶対位置に変更し、それから位置と大きさのプロパティを調整しています。最初にpositionを操作しておかないと位置は変更されないのです。
width――横幅
height――縦幅
top――縦位置（上からの距離）
left――横位置（左からの距離）
これらを設定することで、エレメントの位置や大きさを自由に設定できます。ただし！ ただ、これらの値を適当に変更したからといって、それだけでは位置や大きさは変わりません。いくつかポイントがあります。
・数値ではダメ！
これらの位置や大きさは、数値を使って指定しますが、しかし実は「数値を指定してもダメ」なのです。例えば、○○.style.width = 100; とやっても、大きさは変わりません。もし100ピクセルの大きさにしたければ、100ではなく、"100px"としなければいけません。
スタイルシートでは、これらの属性の値は数値ではなく「数値＋単位」のテキストとして設定されます。これは、エレメントでも同じです。数値の後に単位をつけたテキストで値を指定しなければいけません。
・positionの設定
大きさについてはこれで使えるようになりますが、位置に関しては、この他に「position」を設定しなければいけません。positionは、「その要素の位置をどのような形で決めるか」を設定するものです。これは、以下のいずれかに設定されます。
static
デフォルトの値です。静的な配置で、ドキュメントの中に、指定された位置に表示します。これを指定すると、スタイルをいくら変更しても位置はまったく変わらず、固定されたままです。
absolute
ボディの左上からの絶対位置で指定するものです。これを指定すると、その要素は他の要素との組み込み関係とは無関係に、独自に位置が指定されるようになります。top/leftを設定すると、ドキュメントの左上から指定されただけ離れた位置に表示されます。
fixed
ブラウザのウインドウの絶対位置で指定するものです。これを指定すると、（ドキュメントではなく）ブラウザウインドウの左上から指定された場所に表示されます。ウインドウからの絶対位置ですから、ドキュメントをスクロールしてもその要素はスクロールせず、指定した場所に表示され続けます。
relative
staticで本来の位置関係で表示される場所からの相対位置として指定するものです。absolute/fixedのように特定の場所からの絶対位置ではなく、あくまで「本来、ここに表示されるはず」という場所からの相対位置ですので、他の要素を操作するとそれにあわせて位置が移動したり調整されたりします。
※利用例
では、実際にこれらを使って位置と大きさを操作したサンプルを下のリストにあげておきましょう。ページをロードした際、initial関数を実行して、ターゲットとなる<div>タグの位置と大きさを設定します。
ここでは、まず、target.style.position = "absolute";で表示位置を絶対位置に変更し、それから位置と大きさのプロパティを調整しています。最初にpositionを操作しておかないと位置は変更されないのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<script type="text/javascript">
<!--
function initial(){
var target = document.getElementById("target");
target.style.background = "red";
target.style.position = "absolute";
target.style.width = "100px";
target.style.height = "100px";
target.style.top = "100px";
target.style.left = "100px";
}
//-->
</script>
</head>
<body onload="initial();">
<H1>TEST.</H1>
<div id="target">※位置・大きさの変更</div>
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る