エレメントの基本的な制御について
エレメントを移動する
■エレメントの配置について
特にスタイルシートを設定していない場合、エレメント同士が重ならないよう自動的に位置が補正される状態となっており、動的に位置を制御する事ができません。
そこで、スタイルシートの position を static 以外に変更します。
| 値 | 解説 |
| static | デフォルトの配置状態です。エレメント同士が重ならないよう自動的に位置が補正されます。 |
| relative | デフォルトの配置状態（static）が原点となり、そこから相対的に位置を変更することができます。 |
| absolute | HTML 全体の左上を原点とした絶対的な配置となります。 「自身のエレメント」を保有する「親エレメント」の position が static 以外であれば、そのエレメントが原点となる座標系となります。 |
| fixed | ブラウザのクライアント座標系を基点とした配置です。 スクロールは無視され、画面に固定されたような状態になります。 |
■relative について
デフォルトの配置状態を基点（原点）として、そこから相対的に位置を変更することができます。
エレメントの位置を変更した場合、見た目は移動します。
しかし、存在矩形自体は、デフォルトの場所（原点）にそのまま残ります。
よって、周りのエレメントの配置が変わることはありません。
静的に配置したオブジェクトを動的に動かしても、元のレイアウトは崩れません。
■absolute について
デフォルトの配置から完全に独立して別レイヤーであるかのように動作します。
自身のエレメントから親へ親へと順番にたどっていき、 「position が static 以外」に設定されていれば、そのエレメントを基点（原点）とした座標系となります。
親の position がすべてデフォルトの static であれば、「HTML 全体」の左上が基点（原点）となります。
ある親エレメントを基点として、任意のエレメントを absolute で動作させたい場合は、基点（原点）としたい親エレメントに relative を設定するといいでしょう。
動的に position を変更する例です。
動的に position を変更する
// DIV を作成する
var element = document.createElement("div");
// HTML 文字列をセット
element.innerHTML = "表示テスト";
// スタイルをセット
element.style.position = "fixed";
element.style.width = "400px";
element.style.height = "300px";
element.style.border = "10px #000 solid";
element.style.backgroundColor = "#FFF";
// ノードに登録する
document.body.appendChild(element);
■エレメントを移動する
スタイルシートの position を static 以外に設定すると、left と top が動作するようになります。
left で x 座標を変更することができます。
top で y 座標を変更することができます。
padding や border や margin を含みます。
| left(x座標) と top (y座標) |
 |
ピクセル単位で移動させたい場合は、"123px" という感じで文字列として指定する必要があります。
数値型で指定することはできません。
エレメントを右下に少しずつ移動する
// DIV を作成する
var element = document.createElement("div");
// HTML 文字列をセット
element.innerHTML = "表示テスト";
// スタイルをセット
element.style.position = "fixed";
element.style.width = "400px";
element.style.height = "300px";
element.style.border = "10px #000 solid";
element.style.backgroundColor = "#FFF";
// ノードに登録する
document.body.appendChild(element);
var px = 0.0;
var py = 0.0;
var dx = 0.5;
var dy = 0.2;
// 30fps 間隔で実行
setInterval(function(){
// 速度を座標に加算
px += dx;
py += dy;
// 位置を更新する
element.style.left = Math.floor(px) + "px";
element.style.top = Math.floor(py) + "px";
},1000/30);
エレメントの重なり順序を変更する
■エレメントの重なり順序を変更する
エレメント同士を重ねるためには、エレメントの配置を設定する必要があります。
スタイルシートの position を static 以外に設定すると、z-index が動作するようになります。
z-index の値が、高いほど手前に表示され、低いほど奥に表示されます。
同じ番号を設定したか、奥行きを設定しなかった場合は、ノードリストの最前列であるほど奥に表示され、最後尾であるほど手前に表示されます。
動的に z-index を変更する例です。
JavaScript では、zIndex という名称になります。
動的に zIndex を変更する
// DIV を作成する
var element_a = document.createElement("div");
var element_b = document.createElement("div");
// スタイルをセット
var style_a = element_a.style;
style_a.position = "fixed";
style_a.zIndex = 2;
style_a.left = "100px";
style_a.top = "50px";
style_a.width = "200px";
style_a.height = "100px";
style_a.border = "10px #A00 solid";
style_a.backgroundColor = "#F88";
var style_b = element_b.style;
style_b.position = "fixed";
style_b.zIndex = 1;
style_b.left = "250px";
style_b.top = "100px";
style_b.width = "100px";
style_b.height = "200px";
style_b.border = "10px #00A solid";
style_b.backgroundColor = "#88F";
// ノードに登録する
document.body.appendChild(element_a);
document.body.appendChild(element_b);
エレメントのサイズを変更する
■エレメントがブロックレベル要素であるか確認する
エレメントの表示形式が、<A> や <B> や <SPAN> などのインライン要素である場合、幅と高さが変更できません。そんな場合は、エレメントの表示形式をブロックレベル要素に変更します。
表示形式をブロックレベル要素に変更するには、display に "block" を設定します。
span エレメントをブロックレベル要素に変更する
// SPAN を作成する
var element = document.createElement("span");
// スタイルをセット
var style = element.style;
style.display = "block";
// ノードに登録する
document.body.appendChild(element);
■エレメントのサイズを変更する
エレメントの幅を変更するには、スタイルシートの width を設定します。
エレメントの高さを変更するには、スタイルシートの height を設定します。
padding や border や margin を含みません。
ピクセル単位で変更したい場合は、"123px" という感じで文字列として指定する必要があります。
数値型で指定することはできません。
エレメントの幅と高さを設定する
// DIV を作成する
var element = document.createElement("div");
// スタイルをセット
var style = element.style;
style.width = "200px";
style.height = "100px";
style.border = "10px #A00 solid";
style.backgroundColor = "#F88";
// ノードに登録する
document.body.appendChild(element);
■エレメントの配置設定による動作の変化について
エレメントの配置設定により挙動が変化します。
スタイルシートの position を、
static か relative に設定している場合、
任意のエレメントの幅と高さを変更すると、周りのエレメントと重ならないように、周りのエレメントの配置が変化します。
スタイルシートの position を、
absolute か fixed に設定している場合、
周りのエレメントに影響が無く、自由に幅と高さを変更できます。
■親エレメントの上端、下端、左端、右端からの距離で指定する
スタイルシートの position を、
absolute か fixed に設定している場合、right と bottom の設定も可能になります。
「エレメントの右端」を「親エレメントの右端からの距離」で変更するには、スタイルシートの right を設定します。
「エレメントの下端」を「親エレメントの下端からの距離」で変更するには、スタイルシートの bottom を設定します。
padding や border や margin を含みます。
ピクセル単位で変更したい場合は、"123px" という感じで文字列として指定する必要があります。
数値型で指定することはできません。
right、bottom を使用してエレメントの幅と高さを設定する
// DIV を作成する
var element = document.createElement("div");
// スタイルをセット
var style = element.style;
style.position = "fixed";
style.left = "100px";
style.top = "50px";
style.right = "200px";
style.bottom = "150px";
style.border = "10px #A00 solid";
style.backgroundColor = "#F88";
// ノードに登録する
document.body.appendChild(element);
■ブラウザのクライアント領域にフィットさせる
スタイルシートの left、right、top、bottom に 0px をセットすると、親エレメントにフィットするように配置することができます。
さらに、position に fixed をセットすると、ブラウザのクライアント領域にフィットするように配置することができます。
ブラウザのクライアント領域にフィットするようにエレメントを配置する
// DIV を作成する
var element = document.createElement("div");
// スタイルをセット
var style = element.style;
style.position = "fixed";
style.left = "0px";
style.top = "0px";
style.right = "0px";
style.bottom = "0px";
style.border = "10px #A00 solid";
style.backgroundColor = "#F88";
// ノードに登録する
document.body.appendChild(element);
エレメントの表示矩形サイズを取得する
■エレメントのバウンディングボックスの矩形サイズを取得する（クライアント座標系）
エレメントのバウンディングボックスの矩形サイズを取得するには、getBoundingClientRect() メソッドを使用します。
このメソッドで得られる値は、クライアント座標系となります。
クライアント座標系とは、ブラウザで HTML がレンダリングされる部分です。
バウンディングボックスの矩形サイズを取得する（クライアント座標系）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>タイトル</title>
</head>
<body>
<div style="width:5000px; height:5000px; background-color:#eee;"></div>
<div id="aaa" style="position:absolute; width:300px; height:200px; left:50px; top:100px; border:10px solid #000; background-color:#f44;" ></div>
<script type="text/javascript">
<!--
var element;
// aaa という ID のエレメントを取得する
element = document.getElementById("aaa");
// クリックされたときに実行されるイベント
element.onclick = function(){
// バウンディングボックスの矩形サイズを取得する（クライアント座標系）
var rect = element.getBoundingClientRect();
// 出力テスト
console.log("left:" + rect.left);
console.log("right:" + rect.right);
console.log("top:" + rect.top);
console.log("bottom:" + rect.bottom);
}
//-->
</script>
</body>
</html>
得られる値は、padding や border や margin を含みます。そのため…
right から left を引くと「バウンディングボックスの幅」、
bottom から top を引くと「バウンディングボックスの高さ」が得られますが、
「バウンディングボックスの幅」と width、「バウンディングボックスの高さ」と height が一致するとは限りません。
■エレメントのバウンディングボックスの矩形サイズを取得する（グローバル座標系）
HTML 全体の左上を基点（原点）とした、バウンディングボックスの矩形サイズを計算します。
まず、ブラウザのスクロール位置を調べます。
スクロール位置を取得する関数
// スクロール位置を取得する関数
function DocumentGetScrollPosition(){
return{
x:document.body.scrollLeft || document.documentElement.scrollLeft,
y:document.body.scrollTop || document.documentElement.scrollTop
};
}
getBoundingClientRect() メソッドで、クライアント領域の矩形サイズを取得して、スクロール位置を加算します。
これで、HTML 全体の左上を基点（原点）としたグローバル座標系となります。
バウンディングボックスの矩形サイズを取得する（グローバル座標系）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>タイトル</title>
</head>
<body>
<div style="width:5000px; height:5000px; background-color:#eee;"></div>
<div id="aaa" style="position:absolute; width:300px; height:200px; left:50px; top:500px; border:10px solid #000; background-color:#f44;" ></div>
<script type="text/javascript">
<!--
// スクロール位置を取得する関数
function DocumentGetScrollPosition(){
return{
x:document.body.scrollLeft || document.documentElement.scrollLeft,
y:document.body.scrollTop || document.documentElement.scrollTop
};
}
var element;
// aaa という ID のエレメントを取得する
element = document.getElementById("aaa");
// バウンディングボックスの矩形サイズを取得する（クライアント座標系）
var rect = element.getBoundingClientRect();
// クリックされたときに実行されるイベント
element.onclick = function(){
// スクロール位置を取得
pos = DocumentGetScrollPosition();
// スクロール位置を矩形サイズに加算（グローバル座標系）
rect.left += pos.x;
rect.right += pos.x;
rect.top += pos.y;
rect.bottom += pos.y;
// 出力テスト
console.log("left:" + rect.left);
console.log("right:" + rect.right);
console.log("top:" + rect.top);
console.log("bottom:" + rect.bottom);
}
//-->
</script>
</body>
</html>
エレメントを半透明にする
■エレメントを半透明にする
エレメントに半透明を設定するには、スタイルシートの opacity を使用します。
0.0 ～ 1.0 までの値を指定します。
Internet Explorer 8 以下は未対応です。変わりに filter:alpha(opacity=50) を使用します。
エレメントに透明度を設定する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>タイトル</title>
</head>
<body>
<div id="aaa" style="opacity:0.7; position:absolute; width:300px; height:200px; left:50px; top:100px; border:10px solid #000; background-color:#f44;" ></div>
<div id="bbb" style="opacity:1.0; position:absolute; width:300px; height:200px; left:150px; top:200px; border:10px solid #000; background-color:#44f;" ></div>
<script type="text/javascript">
<!--
var element;
// bbb という ID のエレメントを取得する
element = document.getElementById("bbb");
// 透明度を設定する
element.style.opacity = 0.5;
//-->
</script>
</body>
</html>
問答収集
