JavaScript プログラミング講座


エレメントについて（HTMLElement）



・エレメントについて
・エレメントのプロパティについて
・エレメントの属性について
・エレメントのスタイルについて
・エレメントのスクロールについて
・エレメントの移動について
・エレメントの表示優先度（奥行き）について
・エレメントのサイズについて
・エレメントの透明度について
・エレメントとの当たり判定について
・エレメントのトランスフォームについて

前のページに戻る

　

エレメントについて

　


■エレメントについて

　
エレメントは、「HTML 文書」や「XML 文書」の、要素（タグ）に相当します。
　
エレメントは、ブラウザ画面上に配置して表示できる、DOM オブジェクトの１つです。（HTML 文書の場合）
　
タグ（要素）はエレメントとなる

<span>あいうえお</span>

<div>かきくけこ</div>

<img src="http://hakuhin.jp/test.jpg">
　
■アトリビュート（属性）の管理について
　
エレメントは、アトリビュート（属性）を管理することができます。
　
属性については、こちらで解説しています。
　
■インラインスタイルについて
　
エレメントは、スタイル属性を保有しています。
　
スタイル宣言については、こちらで解説しています。
　

■ Element インターフェースについて

　
エレメントには、様々な種類があります。
　
エレメントであれば、共通して利用できる基本的な機能として、Element というインターフェースが定められています。
　

■ HTMLElement インターフェースについて

　
HTML 文書のエレメントは、HTMLElement というインターフェースとなります。
　
このページでは主に、Element と HTMLElement インターフェースで供給される機能について解説しています。
　
■ HTMLElement インターフェースの派生について

HTMLElement インターフェースは、以下の様に派生しています。
　
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
　
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
　

上に戻る

　

エレメントのプロパティについて

　


■エレメントのプロパティ一覧

　
HTMLElement インターフェースで利用可能な、プロパティの一覧です。（一部抜粋）
　
■ Element インターフェース
　
プロパティ名型説明
tagNameStringタグ名を取得する（読み取り専用）
scrollLeftNumberエレメント内の水平方向のスクロール位置を設定する。
scrollTopNumberエレメント内の垂直方向のスクロール位置を設定する。
scrollWidthNumberエレメント内の幅を取得する。（読み取り専用）
scrollHeightNumberエレメント内の高さを取得する。（読み取り専用）
clientLeftNumber左側の border のサイズを取得する。（読み取り専用）
clientTopNumber上側の border のサイズを取得する。（読み取り専用）
clientWidthNumberボーダーを含まない、エレメントの幅を取得する。（読み取り専用）
clientHeightNumberボーダーを含まない、エレメントの高さを取得する。（読み取り専用）
　
■ HTMLElement インターフェース
　
プロパティ名型説明
idStringID 属性を設定する
titleStringtitle 属性を設定する
langStringlang 属性を設定する
dirStringdir 属性を設定する
classNameStringクラス属性を設定する
offsetParentElement原点となる親エレメントを取得する。（読み取り専用）
offsetLeftNumber親エレメントを原点とした、水平方向の位置を取得する。（読み取り専用）
offsetTopNumber親エレメントを原点とした、垂直方向の位置を取得する。（読み取り専用）
offsetWidthNumberボーダーを含む、エレメントの幅を取得する。（読み取り専用）
offsetHeightNumberボーダーを含む、エレメントの高さを取得する。（読み取り専用）
　

■タグ名を取得する


エレメントのタグ名を取得するには、tagName プロパティを使用します。
　
このプロパティは、読み取り専用です。
　
「HTML 文書」の場合、すべて大文字に変換されて取得できます。
　
Internet Explorer 8 以前では、大文字と小文字の状態が元のまま取得できる場合があります。
　
「XML 文書」の場合、大文字と小文字の状態が元のまま取得できます。
　
document から、すべての子孫エレメントのタグ名を調べる

<!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-Style-Type" content="text/css">
    <title>タイトル</title>
  </head>

  <body>

    <div>あいう</div>
    <div>えおか</div>
    <div>
      <span>こさし</span>
      <span>すせそ</span>
    </div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}

	// ------------------------------------------------------------
	// DOM オブジェクトから階層のパスを調べる関数
	// ------------------------------------------------------------
	function DomNodeNodeGetPath(node){
		var str = node.nodeName;

		while(true){
			var parent = node.parentNode;
			if(!parent)	break;

			str = parent.nodeName + "." + str;
			node = parent;
		}

		return str;
	}

	// ------------------------------------------------------------
	// コールバック関数を使って、document のすべての子孫を検索
	// ------------------------------------------------------------
	DomNodeFindAllDescendants(document,function (node){

		// エレメントであるか
		if(node.nodeType == 1){

			var str = "";

			// 階層パス
			str += "パス:" + DomNodeNodeGetPath(node) + " ";

			// タグ名
			str += "タグ名:" + node.tagName;

			// コンソール出力
			console.log(str);

		}

		// 検索を継続（任意のオブジェクトを返すと終了）
		return null;
	});

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

エレメントの属性について

　
■「アトリビュート(属性)」を作成する
■エレメントに、「アトリビュート(属性)」を登録する
■エレメントから、「アトリビュート(属性)」を取得する
■エレメントから、「アトリビュート(属性)」を除外する
　


■アトリビュート（属性）を作成する

　
Attr オブジェクトを作成するには、document.createAttribute() メソッドを使用します。
　
アトリビュートについては、こちらで解説しています。
　
アトリビュートを作成し、属性値を設定する

// アトリビュートを作成する
var attribute = document.createAttribute("my_attr");

// 属性値を設定する
attribute.value = "my_value";
　

■エレメントに、アトリビュート（属性）を登録する

　
■「属性名」と「属性値」を指定して、エレメントに属性を登録する
　
「属性名」と「属性値」を指定して、エレメントに属性を登録するには、setAttribute() メソッドを使用します。
　
Element.setAttribute( "属性名" , "属性値" ) :Void
第01引数 String登録したい、「属性名」を指定する。
第02引数 String登録したい、「属性値」を指定する。
戻り値 Voidなし
　
「属性名」と「属性値」を指定して、エレメントにアトリビュートを登録する

// エレメントを作成する
var element = document.createElement("div");

// 「属性名」と「属性値」を指定して、アトリビュートを登録する
element.setAttribute("my_attr","my_value");
　
■「Attr オブジェクト」を指定して、エレメントに属性を登録する
　
「Attr オブジェクト」を指定して、エレメントに属性を登録するには、setAttributeNode() メソッドを使用します。
　
Element.setAttributeNode( Attr ) :Attr
第01引数 Attr登録したい「Attr オブジェクト」を指定。
戻り値 Attr新規に属性名を登録する場合は、null が得られる。既存の属性名を上書きする場合は、古い「Attr オブジェクト」が得られる。
　
エレメントに「Attr オブジェクト」を登録する

// エレメントを作成する
var element = document.createElement("div");

// アトリビュートを作成する
var attribute = document.createAttribute("my_attr");

// 属性値を設定する
attribute.value = "my_value";

// エレメントに「Attr オブジェクト」を登録する
element.setAttributeNode(attribute);
　

■エレメントから、アトリビュート（属性）を取得する

　
■「属性名」を指定して、「属性値」を取得する
　
エレメントから、属性値を取得するには、getAttribute() メソッドを使用します。
　
Element.getAttribute( "属性名" ) :String
第01引数 String「属性名」を指定する。
戻り値 String指定した「属性名」が存在する場合「属性値」が得られる。存在しない場合は、null が得られる。
　
「属性名」を指定して「属性値」を取得する

// エレメントを作成する
var element = document.createElement("div");

// 「属性名」と「属性値」を指定して、アトリビュートを登録する
element.setAttribute("my_attr","my_value");

// 「属性名」を指定して「属性値」を取得する
var value = element.getAttribute("my_attr");

// 出力テスト
console.log(value);
　
■「属性名」を指定して、「Attr オブジェクト」を取得する
　
エレメントから、「Attr オブジェクト」を取得するには、getAttributeNode() メソッドを使用します。
　
Element.getAttributeNode( "属性名" ) :Attr
第01引数 String「属性名」を指定する。
戻り値 Attr指定した「属性名」が存在する場合「Attr オブジェクト」が得られる。存在しない場合は、null が得られる。
　
「属性名」を指定して、「Attr オブジェクト」を取得する

// エレメントを作成する
var element = document.createElement("div");

// 「属性名」と「属性値」を指定して、アトリビュートを登録する
element.setAttribute("my_attr","my_value");

// 「属性名」を指定して、「Attr オブジェクト」を取得する
var attribute = element.getAttributeNode("my_attr");

// 出力テスト
console.log("name:" + attribute.name + " value:" + attribute.value);
　

■エレメントから、アトリビュート（属性）を除外する

　
■「属性名」を指定して、エレメントから属性を除外する
　
「属性名」を指定して、エレメントから属性を除外するには、removeAttribute() メソッドを使用します。
　
Element.removeAttribute( "属性名" ) :Void
第01引数 String除隊したい「属性名」を指定する。
戻り値 Voidなし
　
「属性名」を指定して、アトリビュートを除外する

// エレメントを作成する
var element = document.createElement("div");

// 「属性名」と「属性値」を指定して、アトリビュートを登録する
element.setAttribute("my_attr","my_value");

// 「属性名」を指定して、アトリビュートを除外する
element.removeAttribute("my_attr");

// 出力テスト
console.log(element.getAttribute("my_attr"));
　
■「Attr オブジェクト」を指定して、エレメントから属性を除外する
　
「Attr オブジェクト」を指定して、エレメントから属性を除外するには、removeAttributeNode() メソッドを使用します。
　
登録されていない「Attr オブジェクト」を指定するとエラーとなります。
　
Element.removeAttributeNode( Attr ) :Attr
第01引数 Attr除外したい「Attr オブジェクト」を指定する。
戻り値 Attr除外した「Attr オブジェクト」が得られる。
　
エレメントから「Attr オブジェクト」を除外する

// エレメントを作成する
var element = document.createElement("div");

// アトリビュートを作成する
var attribute = document.createAttribute("my_attr");

// 属性値を設定する
attribute.value = "my_value";

// エレメントに「Attr オブジェクト」を登録する
element.setAttributeNode(attribute);

// エレメントから「Attr オブジェクト」を除外する
element.removeAttributeNode(attribute);

// 出力テスト
console.log(element.getAttribute("my_attr"));
　

上に戻る

　

エレメントのスタイルについて

　
■インラインスタイルについて
■エレメントに適用されているスタイルをすべて取得する
　


■インラインスタイルについて

　
エレメントは、スタイル属性を保有しています。
　
スタイル属性を使用すると、エレメントごとに、個別にスタイルを設定することができます。
　
エレメントのスタイル属性

<div style="color: #f22; background-color: #fcc; width: 400px; height: 300px;">
	あいうえお
</div>
　
■エレメントから CSSStyleDeclaration オブジェクトを取得する
　
エレメントから、CSSStyleDeclaration オブジェクトを取得するには、style プロパティを使用します。
　
このオブジェクトは、スタイル属性に相当します。
　
エレメントから、CSSStyleDeclaration オブジェクトを取得する

<html>
  <body>

    <div id="aaa" style="color: #f22; background-color: #fcc; width: 400px; height: 300px;"></div>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// CSSStyleDeclaration オブジェクトを取得
	var style = element.style;

	// 出力テスト
	console.log(style);

    //-->
    </script>

  </body>
</html>
　
■CSSStyleDeclaration について
　
CSSStyleDeclaration オブジェクトを使用すると、スタイルを管理することができます。
　
CSSStyleDeclaration オブジェクトの使い方は、こちらで解説しています。
　
エレメントのスタイルを設定する

// ------------------------------------------------------------
// エレメント
// ------------------------------------------------------------
// エレメントを作成する
var element = document.createElement("div");

// BODY のノードリストに登録する
document.body.appendChild(element);


// ------------------------------------------------------------
// CSSStyleDeclaration オブジェクトを取得
// ------------------------------------------------------------
var style = element.style;


// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
// setProperty メソッドが利用可能
if(style.setProperty){
	style.setProperty("color", "#282");
	style.setProperty("font-size", "32px");
	style.setProperty("border", "10px #4c4 solid");
	style.setProperty("background-color", "#cfc");
	style.setProperty("width", "400px");
	style.setProperty("height", "300px");
}else{
	style.color = "#282";
	style.fontSize = "32px";
	style.border = "10px #4c4 solid";
	style.backgroundColor = "#cfc";
	style.width = "400px";
	style.height = "300px";
}

// ------------------------------------------------------------
// スタイルの値を取得する
// ------------------------------------------------------------
// getPropertyValue メソッドが利用可能
if(style.getPropertyValue){
	console.log(style.getPropertyValue("color"));
	console.log(style.getPropertyValue("font-size"));
	console.log(style.getPropertyValue("border"));
	console.log(style.getPropertyValue("background-color"));
	console.log(style.getPropertyValue("width"));
	console.log(style.getPropertyValue("height"));
}else{
	console.log(style.color);
	console.log(style.fontSize);
	console.log(style.border);
	console.log(style.backgroundColor);
	console.log(style.width);
	console.log(style.height);
}

// ------------------------------------------------------------
// スタイルを除去する
// ------------------------------------------------------------
// removeProperty メソッドが利用可能
if(style.removeProperty){
	style.removeProperty("color");
	style.removeProperty("font-size");
	style.removeProperty("border");
	style.removeProperty("background-color");
	style.removeProperty("width");
	style.removeProperty("height");
}
　

■エレメントに適用されているスタイルをすべて取得する

　
エレメントに最終的に適用されているスタイルをすべて取得するには、window.getComputedStyle() メソッドを使用します。
　
戻り値から、CSSStyleDeclaration オブジェクトが得られます。
　
得られた CSSStyleDeclaration オブジェクトは、読み取りアクセスのみ可能です。
　
CSSStyleDeclaration オブジェクトの使い方は、こちらで解説しています。
　
AbstractView.getComputedStyle( エレメント , "擬似要素" ) :CSSStyleDeclaration
第01引数 Element調べたいエレメントを指定する。
第02引数(略可)String擬似要素を文字列で指定。例えば ":first-letter"、":after" など。
戻り値 CSSStyleDeclarationCSSStyleDeclaration オブジェクトが得られる。（読み取りアクセスのみ可能）
　
■ InternetExplorer 8 以前の場合
　
getComputedStyle() メソッドは、InternetExplorer 8 以前では未対応です。
　
かわりに、エレメントの currentStyle プロパティからアクセスします。
　
エレメントに最終的に適用されているスタイルをすべて取得する関数

// --------------------------------------------------------------------------------
// エレメントに最終的に適用されているスタイルをすべて取得する関数
// --------------------------------------------------------------------------------
function ElementGetComputedStyle(element,pseudo_element){
	var document_obj = element.ownerDocument;
	if(document_obj){
		var window_obj = document_obj.defaultView;
		if(window_obj){
			if(window_obj.getComputedStyle !== undefined){
				return window_obj.getComputedStyle(element,pseudo_element);
			}
		}
	}
	if(element.currentStyle !== undefined){
		return element.currentStyle;
	}
	return null;
}
　
■取得例
　
エレメントに最終的に適用されているスタイルをすべて取得する

<html>
  <head>

    <style type="text/css">
	<!--
	#aaa {
		font-size:16px;
		line-height:1.4;
	}
	-->
    </style>

  </head>

  <body>

    <div id="aaa" style="color: #f22; background-color: #fcc; width: 400px; height: 300px;"></div>

    <script type="text/javascript">
    <!--
	// --------------------------------------------------------------------------------
	// エレメントに最終的に適用されているスタイルをすべて取得する関数
	// --------------------------------------------------------------------------------
	function ElementGetComputedStyle(element,pseudo_element){
		var document_obj = element.ownerDocument;
		if(document_obj){
			var window_obj = document_obj.defaultView;
			if(window_obj){
				if(window_obj.getComputedStyle !== undefined){
					return window_obj.getComputedStyle(element,pseudo_element);
				}
			}
		}
		if(element.currentStyle !== undefined){
			return element.currentStyle;
		}
		return null;
	}


	// --------------------------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// --------------------------------------------------------------------------------
	var element = document.getElementById("aaa");

	// --------------------------------------------------------------------------------
	// エレメントに最終的に適用されているスタイルをすべて取得する
	// --------------------------------------------------------------------------------
	var style = ElementGetComputedStyle(element,"");

	// 出力テスト
	console.log(style.fontSize);
	console.log(style.lineHeight);
	console.log(style.color);
	console.log(style.backgroundColor);
	console.log(style.width);
	console.log(style.height);

	// まとめて出力
	console.log(style.cssText);

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

エレメントのスクロールについて

　
■スクロール可能なエレメントについて
■エレメント内のスクロール位置を設定する
■エレメント内のサイズを取得する
■任意のエレメントが表示されるようにスクロールする
■ウィンドウのスクロールについて（Window）
　


■スクロール可能なエレメントについて

　

■デフォルトでスクロール可能なタグについて

　
以下のタグは、デフォルトでスクロールバーが表示されます。（一部抜粋）
　
<BODY> <IFRAME> <TEXTAREA>
　

■任意のエレメント内にスクロールバーを表示する

　
スクロールバーを表示するには、エレメントがブロックレベル要素である必要があります。
　
ブロックレベル要素のタグは、<DIV> や <TABLE> や <FORM> などが該当します。
　
スクロールバーを表示するには、スタイルシートの overflow を使用します。
　
"scroll" を設定します。
　
エレメントにスクロールバーを表示する（静的）

<div style="overflow:scroll; width:500px; height:500px;">
	<div style="width:1000px; height:1000px; background:#fcc;"></div>
</div>
　
エレメントにスクロールバーを表示する（動的）

// ------------------------------------------------------------
// 親エレメント
// ------------------------------------------------------------
// エレメントを作成（ブロックレベル要素である）
var element_parent = document.createElement("div");

// スタイルを設定
var style = element_parent.style;
style.overflow = "scroll";
style.width  = "500px";
style.height = "500px";

// BODY のノードリストに登録する
document.body.appendChild(element_parent);


// ------------------------------------------------------------
// 子エレメント（親エレメントの内容）
// ------------------------------------------------------------
// エレメントを作成
var element_child = document.createElement("div");

// スタイルを設定
var style = element_child.style;
style.width  = "1000px";
style.height = "1000px";
style.background = "#fcc";

// 親エレメントのノードリストに登録する
element_parent.appendChild(element_child);
　

■エレメント内のスクロール位置を設定する

　
エレメント内のスクロール位置を設定するには、以下のプロパティを使用します。
　
プロパティ名型説明
scrollLeftNumberエレメント内の水平方向のスクロール位置を設定する。(単位:ピクセル)
scrollTopNumberエレメント内の垂直方向のスクロール位置を設定する。(単位:ピクセル)
　
■設定可能なスクロールの範囲について
　
水平方向の最小値は、0 です。
　
水平方向の最大値は、(scrollWidth - clientWidth) です。
　
垂直方向の最小値は、0 です。
　
垂直方向の最大値は、(scrollHeight - clientHeight) です。
　
■設定例
　
スクロール位置を設定する

<html>
  <body>

    <div id="aaa" style="overflow:scroll; width:500px; height:500px;">
      <div style="width:1500px; height:2000px; background:#fcc;"></div>
    </div>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// スクロール位置を設定する
	element.scrollLeft = 250;
	element.scrollTop = 500;

	// 出力テスト
	console.log("pos_h:" + element.scrollLeft);
	console.log("pos_v:" + element.scrollTop );
	console.log("max_h:" + (element.scrollWidth  - element.clientWidth ));
	console.log("max_v:" + (element.scrollHeight - element.clientHeight));

    //-->
    </script>

  </body>
</html>
　

■エレメント内のサイズを取得する

　
エレメント内（スクロールビュー）のサイズを取得するには、以下のプロパティを使用します。
　
プロパティ名型説明
scrollWidthNumberエレメント内の幅を取得する。(単位:ピクセル)
scrollHeightNumberエレメント内の高さを取得する。(単位:ピクセル)
　
■最小のサイズについて
　
エレメント内の幅が、エレメントの幅より小さいことがあります。
　
この場合、得られる値は clientWidth プロパティと同じになります。
　
エレメント内の高さが、エレメントの高さより小さいことがあります。
　
この場合、得られる値は clientHeight プロパティと同じになります。
　
■取得例
　
エレメント内のサイズを取得する

<html>
  <body>

    <div id="aaa" style="overflow:scroll; width:500px; height:500px;">
      <div style="width:1500px; height:2000px; background:#fcc;"></div>
    </div>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// 出力テスト
	console.log("w:" + element.scrollWidth );
	console.log("h:" + element.scrollHeight);
	console.log("client_w:" + element.clientWidth );
	console.log("client_h:" + element.clientHeight);

    //-->
    </script>

  </body>
</html>
　

■任意のエレメントが表示されるようにスクロールする

　
任意のエレメントが、画面に表示されるようにスクロールするには、scrollIntoView() メソッドを使用します。
　
Element.scrollIntoView( 上端に吸着させるか？ ) :Void
第01引数(略可)Booleantrue の場合、クライアント領域の上端とエレメントの上端を吸着させる。
false の場合、クライアント領域の下端とエレメントの下端を吸着させる。（デフォルトは true）
戻り値 Voidなし
　
エレメントをクリックすると、次のエレメントまでスクロールする

<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px;  top:100px;  width:100px; height:100px; background:#fcc;"></div>
    <div id="bbb" style="position:absolute; left:1000px; top:1000px; width:200px; height:200px; background:#cfc;"></div>
    <div id="ccc" style="position:absolute; left:2000px; top:2000px; width:300px; height:300px; background:#ccf;"></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントを取得する
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	var element_a = document.getElementById("aaa");

	// "bbb" という ID 属性のエレメントを取得する
	var element_b = document.getElementById("bbb");

	// "ccc" という ID 属性のエレメントを取得する
	var element_c = document.getElementById("ccc");


	// ------------------------------------------------------------
	// マウスボタンをクリックしたときに実行されるイベント
	// ------------------------------------------------------------
	element_a.onclick = function (){
		// エレメントＢの位置までスクロール
		element_b.scrollIntoView();
	};

	element_b.onclick = function (){
		// エレメントＣの位置までスクロール
		element_c.scrollIntoView();
	};

	element_c.onclick = function (){
		// エレメントＡの位置までスクロール
		element_a.scrollIntoView();
	};

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

エレメントの移動について

　
■エレメントの配置について
■エレメントの座標を変更する
■エレメントの座標を取得する（クライアント座標系）
■エレメントの座標を取得する（グローバル座標系）
■エレメントの座標を取得する（スタイルで指定した値）
■エレメントの座標を取得する（親エレメントを原点とした座標系）
　


■エレメントの配置について

　
エレメントの配置を変更するには、スタイルシートの position を使用します。
　
以下の種類があります。
　
値 解説
static デフォルトの配置状態です。エレメント同士が重ならないよう自動的に位置が補正されます。
relative デフォルトの配置状態（static）が原点となり、そこから相対的に位置を変更することができます。
absolute HTML 全体の左上を原点とした絶対的な配置となります。
「自身のエレメント」を保有する「親エレメント」の position が static 以外であれば、そのエレメントが原点となる座標系となります。
fixed ブラウザのクライアント領域の左上を基点とした配置です。
スクロールは無視され、画面に固定されたような状態になります。
　
■static について
　
static は、デフォルトの状態です。
　
エレメント同士が重ならないように、自動的に位置が補正される状態となっています。
　
position を static 以外に変更すると、エレメントの位置を変更したり、エレメント同士を重ねる事ができるようになります。
　
■relative について
　
デフォルトの配置状態を基点（原点）として、そこから相対的に位置を変更することができます。
　
エレメントの位置を変更した場合、見た目は移動します。
　
しかし、存在矩形自体は、デフォルトの場所（原点）にそのまま残ります。
　
よって、周りのエレメントの配置が変わることはありません。
　
元のレイアウトは崩れません。
　
　
■absolute について
　
デフォルトの配置から完全に独立して別レイヤーであるかのように動作します。
　
自身のエレメントから、親へ親へと順番にたどっていきます。
　
スタイルシートの position が、static 以外に設定されているエレメントが存在する場合、そのエレメントを基点（原点）とした座標系となります。
　
祖先となるすべてのエレメントに、スタイルシートの position が設定されていない場合（デフォルトの static である場合）、「HTML 全体」の左上が基点（原点）となります。
　
任意の親エレメントを基点（原点）として、子エレメントを absolute で動作させたい場合は、親エレメントに relative を設定するといいでしょう。
　
　
■fixed について
　
エレメントを、クライアント領域に配置することができます。
　
クライアント領域とは、ブラウザにて HTML がレンダリング表示される部分です。
　
クライアント座標系とは、クライント領域の、左上を原点とした座標系です。
　
スクロールが無視され、常に画面に固定（fixed）されているような状態となります。
　
Internet Explorer 6 以前では利用できません。
　
　
■動的にスタイルシートの position を変更する例
　
動的に position を変更する

// エレメントを作成する
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";

// BODY のノードリストに登録する
document.body.appendChild(element);
　

■エレメントを移動する

　
デフォルトの状態では、動的に座標を制御する事はできません。
　
エレメントを移動するためには、エレメントの配置を設定する必要があります。
　
スタイルシートの position を、static 以外に設定します。
　
するとスタイルシートの、left と top が動作するようになります。
　
■座標を変更する
　
left で 水平位置を変更することができます。
　
top で 垂直位置を変更することができます。
　
■基点について
　
親の基点は、border の内側から開始します。親の padding は無視されます。
　
子の基点は、margin の外側から開始します。
　
プロパティの offsetLeft や offsetTop とは異なる事に注意して下さい。
　
　
■座標の単位について
　
ピクセル単位で移動させたい場合は、"px" という単位を付加する必要があります。
　
数値だけを指定する事はできません。
　
例えば、123 という値を指定したい場合は、『 123 + "px" 』 となります。
　
小数値を指定した場合、実際に配置されるのは、四捨五入された整数位置となります。
　
■移動例
　
エレメントを右下に少しずつ移動する

// ------------------------------------------------------------
// エレメントを作成する
// ------------------------------------------------------------
// エレメントを作成する
var element = document.createElement("div");

// BODY のノードリストに登録する
document.body.appendChild(element);


// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
element.style.position = "fixed";
element.style.width  = "200px";
element.style.height = "200px";
element.style.border = "10px #a88 solid";
element.style.backgroundColor = "#fcc";


// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
// 座標用変数
var pos_x = 0.0;
var pos_y = 0.0;

// 速度用変数
var spd_x = 0.5;
var spd_y = 0.2;


// ------------------------------------------------------------
// 30フレームレートの時間隔で実行
// ------------------------------------------------------------
setInterval(function (){

	// 速度を座標に加算
	pos_x += spd_x;
	pos_y += spd_y;

	// 位置を更新する
	element.style.left = (pos_x) + "px";
	element.style.top  = (pos_y) + "px";

},1000/30);
　
　

■エレメントの座標を取得する（クライアント座標系）

　
エレメントの座標を取得するには、getClientRects() メソッドを使用します。
　
getClientRects() メソッドについては、こちらで解説しています。
　
階層の深さや、スクロールの状態に関係なく、簡単にクライアント座標を取得する事ができます。
　
■ClientRectList オブジェクトからクライアント座標を取り出す
　
ClientRectList オブジェクトに、1 つ以上のデータが格納されているか確認します。
　
0 番目に格納されている ClientRect オブジェクトの、left と top プロパティにアクセスします。
　
■基点について
　
エレメントの基点は、border の外側から開始します。
　
スタイルシートの left や top とは、異なるので注意して下さい。
　
　
■取得例
　
エレメントのクライアント座標系の位置を取得する

// ------------------------------------------------------------
// エレメントを作成する
// ------------------------------------------------------------
// エレメントを作成する
var element = document.createElement("div");

// BODY のノードリストに登録する
document.body.appendChild(element);


// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
element.style.position = "absolute";
element.style.width  = "200px";
element.style.height = "200px";
element.style.border = "10px #a88 solid";
element.style.backgroundColor = "#fcc";


// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
// 座標用変数
var pos_x = 0.0;
var pos_y = 0.0;

// 速度用変数
var spd_x = 0.5;
var spd_y = 0.2;


// ------------------------------------------------------------
// 30フレームレートの時間隔で実行
// ------------------------------------------------------------
setInterval(function (){

	// 速度を座標に加算
	pos_x += spd_x;
	pos_y += spd_y;

	// 位置を更新する
	element.style.left = (pos_x) + "px";
	element.style.top  = (pos_y) + "px";

	// 複数の矩形サイズを取得する
	var list = element.getClientRects();
	if(list.length){
		// 0 番目の ClientRect オブジェクトを取得する
		var client_rect = list[0];

		// クライアント座標系の位置を取得する
		var x = client_rect.left;
		var y = client_rect.top;

		// 出力テスト
		console.log("x:" + x + " y:" + y);
	}

},1000/30);
　

■エレメントの座標を取得する（グローバル座標系）

　
エレメントの座標を取得するには、getClientRects() メソッドを使用します。
　
getClientRects() メソッドについては、こちらで解説しています。
　
■ClientRectList オブジェクトからクライアント座標を取り出す
　
ClientRectList オブジェクトに、1 つ以上のデータが格納されているか確認します。
　
0 番目に格納されている ClientRect オブジェクトの、left と top プロパティにアクセスします。
　
■基点について
　
エレメントの基点は、border の外側から開始します。
　
スタイルシートの left や top とは、異なるので注意して下さい。
　
　
■グローバル座標系に変換する
　
ClientRect オブジェクトを、グローバル座標系に変換するには、スクロール位置を取得して加算します。
　
■取得例
　
エレメントのグローバル座標系の位置を取得する

// ------------------------------------------------------------
// スクロール位置を取得する関数
// ------------------------------------------------------------
function DocumentGetScrollPosition(document_obj){
	return{
		x:document_obj.body.scrollLeft || document_obj.documentElement.scrollLeft,
		y:document_obj.body.scrollTop  || document_obj.documentElement.scrollTop
	};
}


// ------------------------------------------------------------
// エレメントを作成する
// ------------------------------------------------------------
// エレメントを作成する
var element = document.createElement("div");

// BODY のノードリストに登録する
document.body.appendChild(element);


// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
element.style.position = "absolute";
element.style.width  = "200px";
element.style.height = "200px";
element.style.border = "10px #a88 solid";
element.style.backgroundColor = "#fcc";


// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
// 座標用変数
var pos_x = 0.0;
var pos_y = 0.0;

// 速度用変数
var spd_x = 0.5;
var spd_y = 0.2;


// ------------------------------------------------------------
// 30フレームレートの時間隔で実行
// ------------------------------------------------------------
setInterval(function (){

	// 速度を座標に加算
	pos_x += spd_x;
	pos_y += spd_y;

	// 位置を更新する
	element.style.left = (pos_x) + "px";
	element.style.top  = (pos_y) + "px";

	// 複数の矩形サイズを取得する
	var list = element.getClientRects();
	if(list.length){
		// 0 番目の ClientRect オブジェクトを取得する
		var client_rect = list[0];

		// クライアント座標系の位置を取得する
		var x = client_rect.left;
		var y = client_rect.top;
		
		// 現在のスクロール位置を取得
		var scroll_pos = DocumentGetScrollPosition(document);

		// グローバル座標系に変換する
		x += scroll_pos.x;
		y += scroll_pos.y;

		// 出力テスト
		console.log("x:" + x + " y:" + y);
	}

},1000/30);
　

■エレメントの座標を取得する（スタイルで指定した値）

　
エレメントに最終的に適用されているスタイルを取得するには、window.getComputedStyle() メソッドを使用します。
　
window.getComputedStyle() メソッドについては、こちらで解説しています。
　
■CSSStyleDeclaration オブジェクトから座標を取り出す
　
CSSStyleDeclaration オブジェクトの、left と top プロパティにアクセスします。
　
スタイルの left と top に設定した情報が、ピクセル単位に変換されて格納されています。
　
Internet Explorer 8 以下の場合は、単位情報はそのままです。
　
何も設定していない場合、"auto" 文字列が得られます。
　
実際の要素の位置と、必ずしも一致するとは限らないので注意してください。
　
あくまでスタイルに設定した値が得られるだけです。
　
■基点について
　
親の基点は、border の内側から開始します。親の padding は無視されます。
　
子の基点は、margin の外側から開始します。
　
スタイルシートの left や top にて、px 単位で指定した場合とほぼ一致します。
　
　
■取得例
　
エレメントに最終的に適用されているスタイルから、座標情報を取得する

<html>
  <body>

    <div id="aaa" style="position:fixed; left:10px; top:20px; right:50px; bottom:100px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--

	// --------------------------------------------------------------------------------
	// エレメントに最終的に適用されているスタイルをすべて取得する関数
	// --------------------------------------------------------------------------------
	function ElementGetComputedStyle(element,pseudo_element){
		var document_obj = element.ownerDocument;
		if(document_obj){
			var window_obj = document_obj.defaultView;
			if(window_obj){
				if(window_obj.getComputedStyle !== undefined){
					return window_obj.getComputedStyle(element,pseudo_element);
				}
			}
		}
		if(element.currentStyle !== undefined){
			return element.currentStyle;
		}
		return null;
	}

	// --------------------------------------------------------------------------------
	// スタイルから座標情報を取得する
	// --------------------------------------------------------------------------------
	function ComputedStyleGetPosition(style){
		var re = new RegExp("([-0-9.]+)px","i");
		var list = [
			{ i:"left"   , o:"left"   },
			{ i:"top"    , o:"top"    },
			{ i:"right"  , o:"right"  },
			{ i:"bottom" , o:"bottom" }
		];
		var i;
		var num = list.length;
		var obj = new Object();
		for(i=0;i < num;i++){
			var p = list[i];
			var m = style[p.i].match(re);
			if(m){
				obj[p.o] = parseFloat(m[1]);
			}else{
				obj[p.o] = 0;
			}
		}
		return obj;
	}

	// --------------------------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	// --------------------------------------------------------------------------------
	var element = document.getElementById("aaa");

	// エレメントに最終的に適用されているスタイルをすべて取得する関数
	var style = ElementGetComputedStyle(element,"");

	// スタイルから座標情報を取得する
	var rect = ComputedStyleGetPosition(style);

	// 出力テスト
	console.log("left:"   + rect.left  ); // 10
	console.log("top:"    + rect.top   ); // 20
	console.log("right:"  + rect.right ); // 50
	console.log("bottom:" + rect.bottom); // 100

    //-->
    </script>

  </body>
</html>
　

■エレメントの座標を取得する（親エレメントを原点とした座標系）

　
エレメントの座標を取得するには、以下のプロパティを使用します。
　
プロパティ名型説明
offsetLeftNumber親エレメントを原点とした、水平方向の位置を取得する。(単位:ピクセル)（読み取り専用）
offsetTopNumber親エレメントを原点とした、垂直方向の位置を取得する。(単位:ピクセル)（読み取り専用）
　
■原点となる親エレメントを取得する
　
原点となる親エレメントを取得するには、offsetParent プロパティを使用します。
　
原点となる親エレメントは、必ずしも１つ上の要素が該当するとは限りません。
　
■親となる条件について
　
自身のエレメントから、親へ親へと順番にたどっていきます。
　
スタイルシートの position が、static 以外に設定されているエレメントが存在する場合、そのエレメントが親となります。
　
祖先となるすべてのエレメントに、スタイルシートの position が設定されていない場合（デフォルトの static である場合）、親は、<BODY> タグに相当します。
　
HTML 全体の左上を原点とした、座標値を取得することができます。
　
static と relative の場合も、この条件で座標を取得できます。
　
スタイルシートの left や top とは、概念が異なるので注意して下さい。
　
fixed の場合は、親は、null です。
　
クライアント座標系を原点とした、座標値を取得することができます。
　
■基点について
　
親の基点は、border の内側から開始します。
　
子の基点は、border の外側から開始します。
　
スタイルシートの left や top とは異なる事に注意して下さい。
　
　
■スクロール可能なエレメントに注意
　
親エレメントまでの間に、スクロール可能なエレメントが存在する場合があります。
　
この時、スクロール位置の成分は無視され、結果に含まれません。
　
scrollTop と scrollLeft プロパティが 0 だったときの位置と等しくなります。
　
■取得例
　
エレメントを右下に少しずつ移動する

// ------------------------------------------------------------
// エレメントを作成する
// ------------------------------------------------------------
// エレメントを作成する
var element = document.createElement("div");

// BODY のノードリストに登録する
document.body.appendChild(element);


// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
element.style.position = "fixed";
element.style.width  = "200px";
element.style.height = "200px";
element.style.border = "10px #a88 solid";
element.style.backgroundColor = "#fcc";


// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
// 座標用変数
var pos_x = 0.0;
var pos_y = 0.0;

// 速度用変数
var spd_x = 0.5;
var spd_y = 0.2;


// ------------------------------------------------------------
// 30フレームレートの時間隔で実行
// ------------------------------------------------------------
setInterval(function (){

	// 速度を座標に加算
	pos_x += spd_x;
	pos_y += spd_y;

	// 位置を更新する
	element.style.left = (pos_x) + "px";
	element.style.top  = (pos_y) + "px";

	// 位置を取得する
	var x = element.offsetLeft;
	var y = element.offsetTop;

	// 出力テスト
	console.log("x:" + x + " y:" + y);

},1000/30);
　

上に戻る

　

エレメントの表示優先度（奥行き）について

　


■エレメントの表示優先度（奥行き）を変更する

　
デフォルトの状態では、動的に表示優先度（奥行き）を制御する事はできません。
　
エレメント同士を重ねるためには、エレメントの配置を設定する必要があります。
　
まず、スタイルシートの position を static 以外に設定します。
　
するとスタイルシートの、z-index が動作するようになります。
　
■表示優先度（奥行き）を変更する
　
プロパティからアクセスする場合、zIndex となります。
　
値が高いほど手前に表示され、低いほど奥に表示されます。
　
同じ値を指定した場合は、ノードリストの最先頭であるほど奥に表示され、最後尾であるほど手前に表示されます。
　
　
■設定例
　
動的に zIndex を変更する

// ------------------------------------------------------------
// エレメントＡを作成する
// ------------------------------------------------------------
// エレメントを作成する
var element_a = 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 element_b = document.createElement("div");

// スタイルをセット
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";


// ------------------------------------------------------------
// エレメントを BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(element_a);
document.body.appendChild(element_b);
　

上に戻る

　

エレメントのサイズについて

　
■エレメントのサイズについて
■エレメントのサイズを変更する（幅と高さを指定）
■エレメントのサイズを変更する（端からの距離を指定）
■エレメントのサイズを矩形（１つ）として取得する
■エレメントのサイズを矩形（複数）として取得する
■エレメントの各サイズを取得する（プロパティ）
■エレメントの各サイズを取得する（スタイルで指定した値）
　


■エレメントのサイズについて

　
■サイズの変更ができないエレメントについて
　
エレメントが、インライン要素かつ非置換要素である場合、幅と高さが変更できません。
　
置換要素のタグは、<IMG> や <INPUT> や <TEXTAREA> や <OBJECT> などが該当します。
　
非置換要素のタグは、<A> や <B> や <SPAN> などが該当します。
　
■サイズ変更が可能な表示形式に変更する
　
表示形式をブロックレベル要素に変更するには、スタイルシートの display に "block" を設定します。
　
SPAN エレメントをブロックレベル要素に変更する

// SPAN エレメントを作成する
var element = document.createElement("span");

// CSSStyleDeclaration オブジェクトを取得
var style = element.style;

// 表示形式をブロックレベル要素に変更する
style.display = "block";

// BODY のノードリストに登録する
document.body.appendChild(element);
　

■サイズ変更による周りへの影響について

　
エレメントのサイズを変更した場合、エレメントの配置設定によって、周りへの影響が変化します。
　
■static と relative の場合
　
周りのエレメントと重ならないように、周りのエレメントの位置が変化します。
　
レイアウトが崩れる可能性があります。
　
　
■absolute と fixed の場合
　
周りのエレメントに影響はありません。
　
自由にサイズを変更する事ができます。
　
　
　


■エレメントのサイズを変更する（幅と高さを指定）

　
■幅と高さを指定して、エレメントのサイズを変更する
　
エレメントの幅を変更するには、スタイルシートの width を使用します。
　
エレメントの高さを変更するには、スタイルシートの height を使用します。
　
padding の内側のサイズを変更することができます。
　
　
■幅と高さの単位について
　
ピクセル単位で変更したい場合は、"px" という単位を付加する必要があります。
　
数値だけを指定する事はできません。
　
例えば、123 という値を指定したい場合は、『 123 + "px" 』 となります。
　
■設定例
　
エレメントの幅と高さを設定する

// エレメントを作成する
var element = document.createElement("div");

// CSSStyleDeclaration オブジェクトを取得
var style = element.style;

// スタイルを設定
style.border = "10px #A00 solid";
style.backgroundColor = "#F88";

// 幅を設定
style.width  = (200) + "px";

// 高さを設定
style.height = (100) + "px";

// BODY のノードリストに登録する
document.body.appendChild(element);
　

■エレメントのサイズを変更する（端からの距離を指定）

　
スタイルシートの position を、absolute か fixed に設定します。
　
するとスタイルシートの、top と bottom と left と right が動作するようになります。
　
top で 親の上端からの距離を変更することができます。
　
bottom で 親の下端からの距離を変更することができます。
　
left で 親の左端からの距離を変更することができます。
　
right で 親の右端からの距離を変更することができます。
　
■基点について
　
親の基点は、border の内側から開始します。親の padding は無視されます。
　
子の基点は、margin の外側から開始します。
　
　
■幅と高さの単位について
　
ピクセル単位で変更したい場合は、"px" という単位を付加する必要があります。
　
数値だけを指定する事はできません。
　
例えば、123 という値を指定したい場合は、『 123 + "px" 』 となります。
　
■設定例
　
right、bottom を使用してエレメントの幅と高さを設定する

// エレメントを作成する
var element = document.createElement("div");

// CSSStyleDeclaration オブジェクトを取得
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";

// BODY のノードリストに登録する
document.body.appendChild(element);
　
■ブラウザのクライアント領域にフィットさせる
　
スタイルシートの top と bottom と left と right に、0px を指定します。
　
すると、親エレメントにフィットさせる事ができます。
　
さらに、スタイルシートの position に、fixed を指定します。
　
すると、ブラウザのクライアント領域にフィットさせる事ができます。
　
ブラウザのクライアント領域にフィットするようにエレメントを配置する

// エレメントを作成する
var element = document.createElement("div");

// CSSStyleDeclaration オブジェクトを取得
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";

// BODY のノードリストに登録する
document.body.appendChild(element);
　
　
　


■エレメントのサイズを１つの矩形として取得する

　
エレメントのサイズを１つの矩形として取得するには、getBoundingClientRect() メソッドを使用します。
　
戻り値から、ClientRect オブジェクトが得られます。
　
ClientRect インターフェースについては、こちらで解説しています。
　
エレメントがノードリストに登録されていない場合、すべてのプロパティ値が 0 である ClientRect オブジェクトが得られます。
　
■矩形の範囲について
　
エレメントは、必ずしも１つの矩形状態になるとは限りません。
　
例えば、インライン要素の場合、文章が折り返され２つ以上に分離されて表示されることがあります。
　
getBoundingClientRect() メソッドは、ボーダーをすべて囲む１つの矩形が得られます。
　
　
　
■取得例
　
エレメントのサイズを１つの矩形として取得する

<html>
  <body>

    <div style="position:absolute; left:100px; top:200px; width:200px; border:10px solid #a44; background-color:#fcc;" >
	    <span id="aaa">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</span>
    </div>

    <script type="text/javascript">
    <!--
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// バウンディングボックスの矩形サイズを取得する
	var client_rect = element.getBoundingClientRect();

	// 出力テスト
	console.log("t:" + client_rect.top   );
	console.log("b:" + client_rect.bottom);
	console.log("l:" + client_rect.left  );
	console.log("r:" + client_rect.right );
	console.log("w:" + (client_rect.right  - client_rect.left));
	console.log("h:" + (client_rect.bottom - client_rect.top ));

    //-->
    </script>

  </body>
</html>
　

■エレメントのサイズを複数の矩形として取得する

　
エレメントのサイズを複数の矩形として取得するには、getClientRects() メソッドを使用します。
　
戻り値から、ClientRectList オブジェクトが得られます。
　
ClientRectList オブジェクトは、配列のように中身を取り出せます。
　
ClientRectList オブジェクトの中には、ClientRect オブジェクトが格納されています。
　
ClientRect インターフェースについては、こちらで解説しています。
　
エレメントが、ノードリストに登録されていない場合、空の ClientRectList オブジェクトが得られます。
　
■矩形の範囲について
　
エレメントは、必ずしも１つの矩形状態になるとは限りません。
　
例えば、インライン要素の場合、文章が折り返され２つ以上に分離されて表示されることがあります。
　
getClientRects() メソッドは、分離状態となっているすべての矩形が得られます。
　
　
　
■取得例
　
エレメントのサイズを複数の矩形として取得する

<html>
  <body>

    <div style="position:absolute; left:100px; top:200px; width:200px; border:10px solid #a44; background-color:#fcc;" >
	    <span id="aaa">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</span>
    </div>

    <script type="text/javascript">
    <!--
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// 複数の矩形サイズを取得する
	var list = element.getClientRects();
	
	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		var client_rect = list[i];

		// 出力テスト
		console.log("id:" + i);
		console.log("t:" + client_rect.top   );
		console.log("b:" + client_rect.bottom);
		console.log("l:" + client_rect.left  );
		console.log("r:" + client_rect.right );
		console.log("w:" + (client_rect.right  - client_rect.left));
		console.log("h:" + (client_rect.bottom - client_rect.top ));
		console.log(" ----- ");
	}

    //-->
    </script>

  </body>
</html>
　

■ClientRect インターフェースについて

　
ClientRect インターフェースには、以下の読み取り専用のプロパティがあります。
　
得られる値は、クライアント座標系です。
　
クライアント座標系とは、ブラウザのクライント領域の、左上を原点とした座標系です。
　
width と height プロパティは、InternetExplorer 8 以前では未対応です。
　
プロパティ名型説明
topNumber上側の位置を取得する。（クライアント座標系）
bottomNumber下側の位置を取得する。（クライアント座標系）
leftNumber左側の位置を取得する。（クライアント座標系）
rightNumber右側の位置を取得する。（クライアント座標系）
widthNumberボーダーを含む、幅を取得する。（right - left）と同等。
heightNumberボーダーを含む、高さを取得する。（bottom - top）と同等。
　
　
■取得例
　
ClientRect オブジェクトを取得する

<html>
  <body>

    <div id="aaa" style="position:absolute; left:500px; top:500px; width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>
    <div style="position:absolute; left:5000px; top:5000px; width:1px; height:1px;" ></div>

    <script type="text/javascript">
    <!--
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// マウスのボタンを押すと実行されるイベント
	document.onmousedown = function (){

		// バウンディングボックスの矩形サイズを取得する
		var client_rect = element.getBoundingClientRect();

		// 出力テスト
		console.log("t:" + client_rect.top   );
		console.log("b:" + client_rect.bottom);
		console.log("l:" + client_rect.left  );
		console.log("r:" + client_rect.right );
		console.log("w:" + (client_rect.right  - client_rect.left));
		console.log("h:" + (client_rect.bottom - client_rect.top ));

	};

    //-->
    </script>

  </body>
</html>
　
■グローバル座標系に変換する
　
ClientRect オブジェクトを、グローバル座標系に変換するには、スクロール位置を取得して加算します。
　
グローバル座標系とは、HTML 全体の左上を原点とした座標系です。
　
ClientRect オブジェクトを取得し、グローバル座標系に変換する

<html>
  <body>

    <div id="aaa" style="position:absolute; left:500px; top:500px; width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>
    <div style="position:absolute; left:5000px; top:5000px; width:1px; height:1px;" ></div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// スクロール位置を取得する関数
	// ------------------------------------------------------------
	function DocumentGetScrollPosition(document_obj){
		return{
			x:document_obj.body.scrollLeft || document_obj.documentElement.scrollLeft,
			y:document_obj.body.scrollTop  || document_obj.documentElement.scrollTop
		};
	}


	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスのボタンを押すと実行されるイベント
	// ------------------------------------------------------------
	document.onmousedown = function (){

		// 現在のスクロール位置を取得
		var scroll_pos = DocumentGetScrollPosition(document);

		// バウンディングボックスの矩形サイズを取得する
		var client_rect = element.getBoundingClientRect();

		// グローバル座標系に変換する
		var global_rect = new Object();
		global_rect.top    = scroll_pos.y + client_rect.top;
		global_rect.bottom = scroll_pos.y + client_rect.bottom;
		global_rect.left   = scroll_pos.x + client_rect.left;
		global_rect.right  = scroll_pos.x + client_rect.right;

		// 出力テスト
		console.log("t:" + global_rect.top   );
		console.log("b:" + global_rect.bottom);
		console.log("l:" + global_rect.left  );
		console.log("r:" + global_rect.right );
		console.log("w:" + (global_rect.right  - global_rect.left));
		console.log("h:" + (global_rect.bottom - global_rect.top ));

	};

    //-->
    </script>

  </body>
</html>
　

■エレメントの各サイズを取得する

　
エレメントの各サイズを取得するには、以下のプロパティを使用します。
　
プロパティ名型説明
clientWidthNumberボーダーを含まない、エレメントの幅を取得する。（読み取り専用）
clientHeightNumberボーダーを含まない、エレメントの高さを取得する。（読み取り専用）
offsetWidthNumberボーダーを含む、エレメントの幅を取得する。（読み取り専用）
offsetHeightNumberボーダーを含む、エレメントの高さを取得する。（読み取り専用）
clientLeftNumber左側の border のサイズを取得する。（読み取り専用）
clientTopNumber上側の border のサイズを取得する。（読み取り専用）
　

■ボーダーを含まない、エレメントのサイズを取得する

　
ボーダーを含まない、エレメントのサイズを取得するには、以下のプロパティを使用します。
　
プロパティ名型説明
clientWidthNumberボーダーを含まない、エレメントの幅を取得する。（読み取り専用）
clientHeightNumberボーダーを含まない、エレメントの高さを取得する。（読み取り専用）
　
■測定方法
　
このプロパティは、border の内側から測定します。
　
スタイルシートの width や height とは異なる事に注意して下さい。
　
　
スクロールバーが存在する場合、結果に含まれません。
　
　
■取得例
　
ボーダーを含まない、エレメントのサイズを取得する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--

	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// 出力テスト
	console.log("w:" + element.clientWidth);
	console.log("h:" + element.clientHeight);

    //-->
    </script>

  </body>
</html>
　

■ボーダーを含む、エレメントのサイズを取得する

　
ボーダーを含む、エレメントのサイズを取得するには、以下のプロパティを使用します。
　
プロパティ名型説明
offsetWidthNumberボーダーを含む、エレメントの幅を取得する。（読み取り専用）
offsetHeightNumberボーダーを含む、エレメントの高さを取得する。（読み取り専用）
　
■測定方法
　
このプロパティは、border の外側から測定します。
　
スタイルシートの width や height とは異なる事に注意して下さい。
　
　
■取得例
　
ボーダーを含む、エレメントのサイズを取得する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--

	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// 出力テスト
	console.log("w:" + element.offsetWidth);
	console.log("h:" + element.offsetHeight);

    //-->
    </script>

  </body>
</html>
　

■ボーダーのサイズを取得する

　
ボーダーのサイズを取得するには、以下のプロパティを使用します。
　
プロパティ名型説明
clientLeftNumber左側の border のサイズを取得する。（読み取り専用）
clientTopNumber上側の border のサイズを取得する。（読み取り専用）
　
■スクロールバーに注意
　
左側に、スクロールバーが存在する場合、結果に含まれるので注意して下さい。
　
　
■右側の border サイズを取得する
　
clientRight に相当する値を取得するには、offsetWidth - (clientWidth + clientLeft) を計算します。
　
右側に、スクロールバーが存在する場合、結果に含まれます。
　
■下側の border サイズを取得する
　
clientBottom に相当する値を取得するには、offsetHeight - (clientHeight + clientTop) を計算します。
　
下側に、スクロールバーが存在する場合、結果に含まれます。
　
■取得例
　
ボーダーのサイズを取得する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:0px solid #a44; border-top-width:11px; border-bottom-width:22px; border-left-width:33px; border-right-width:44px; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// 上側のボーダーサイズを取得する
	var border_top  = element.clientTop;

	// 下側のボーダーサイズを計算する
	var border_bottom = element.offsetHeight - (element.clientHeight + element.clientTop );

	// 右側のボーダーサイズを計算する
	var border_right  = element.offsetWidth  - (element.clientWidth  + element.clientLeft);

	// 左側のボーダーサイズを取得する
	var border_left  = element.clientLeft;

	// 出力テスト
	console.log("t:" + border_top   );
	console.log("b:" + border_bottom);
	console.log("l:" + border_left  );
	console.log("r:" + border_right );

    //-->
    </script>

  </body>
</html>
　

■エレメントの各サイズを取得する（スタイルで指定した値）

　
エレメントに最終的に適用されているスタイルを取得するには、window.getComputedStyle() メソッドを使用します。
　
window.getComputedStyle() メソッドについては、こちらで解説しています。
　
■CSSStyleDeclaration オブジェクトから座標を取り出す
　
CSSStyleDeclaration オブジェクトの、該当プロパティにアクセスします。
　
スタイルに設定した情報が、ピクセル単位に変換されて格納されています。
　
Internet Explorer 8 以下の場合は、単位情報はそのままです。
　
■取得例
　
エレメントに最終的に適用されているスタイルから、各サイズ情報を取得する

<html>
  <head>
    <style>
    <!--
	#aaa {
		padding-left   :11px;
		padding-top    :12px;
		padding-right  :13px;
		padding-bottom :14px;

		border:0px solid #a44;
		border-left-width   :21px;
		border-top-width    :22px;
		border-right-width  :23px;
		border-bottom-width :24px;

		margin-left   :31px;
		margin-top    :32px;
		margin-right  :33px;
		margin-bottom :34px;

		width  : 400px;
		height : 300px;

		background-color:#fcc;
	}
    //-->
    </style>

  </head>
  <body>

    <div id="aaa" ></div>

    <script type="text/javascript">
    <!--

	// --------------------------------------------------------------------------------
	// エレメントに最終的に適用されているスタイルをすべて取得する関数
	// --------------------------------------------------------------------------------
	function ElementGetComputedStyle(element,pseudo_element){
		var document_obj = element.ownerDocument;
		if(document_obj){
			var window_obj = document_obj.defaultView;
			if(window_obj){
				if(window_obj.getComputedStyle !== undefined){
					return window_obj.getComputedStyle(element,pseudo_element);
				}
			}
		}
		if(element.currentStyle !== undefined){
			return element.currentStyle;
		}
		return null;
	}

	// --------------------------------------------------------------------------------
	// スタイルから各サイズ情報を取得する
	// --------------------------------------------------------------------------------
	function ComputedStyleGetSize(style){
		var re = new RegExp("([-0-9.]+)px","i");
		var list = [
			{ i:"width"  , o:"width"  },
			{ i:"height" , o:"height" },
			{ i:"paddingLeft"   , o:"paddingLeft"   },
			{ i:"paddingTop"    , o:"paddingTop"    },
			{ i:"paddingRight"  , o:"paddingRight"  },
			{ i:"paddingBottom" , o:"paddingBottom" },
			{ i:"borderLeftWidth"   , o:"borderLeft"   },
			{ i:"borderTopWidth"    , o:"borderTop"    },
			{ i:"borderRightWidth"  , o:"borderRight"  },
			{ i:"borderBottomWidth" , o:"borderBottom" },
			{ i:"marginLeft"   , o:"marginLeft"   },
			{ i:"marginTop"    , o:"marginTop"    },
			{ i:"marginRight"  , o:"marginRight"  },
			{ i:"marginBottom" , o:"marginBottom" }
		];
		var i;
		var num = list.length;
		var obj = new Object();
		for(i=0;i < num;i++){
			var p = list[i];
			var m = style[p.i].match(re);
			if(m){
				obj[p.o] = parseFloat(m[1]);
			}else{
				obj[p.o] = 0;
			}
		}
		obj.clientWidth  = obj.width  + obj.paddingLeft + obj.paddingRight;
		obj.clientHeight = obj.height + obj.paddingTop + obj.paddingBottom;
		obj.offsetWidth  = obj.clientWidth  + obj.borderLeft + obj.borderRight;
		obj.offsetHeight = obj.clientHeight + obj.borderTop + obj.borderBottom;
		return obj;
	}

	// --------------------------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	// --------------------------------------------------------------------------------
	var element = document.getElementById("aaa");

	// エレメントに最終的に適用されているスタイルをすべて取得する関数
	var style = ElementGetComputedStyle(element,"");

	// スタイルから各サイズ情報を取得する
	var size_obj = ComputedStyleGetSize(style);

	// 出力テスト
	console.log("---content size ---");
	console.log("width:"  + size_obj.width  ); // 400
	console.log("height:" + size_obj.height ); // 300

	console.log("---client size ---");
	console.log("width:"  + size_obj.clientWidth  ); // 424 (400 + 11 + 13)
	console.log("height:" + size_obj.clientHeight ); // 326 (400 + 12 + 14)

	console.log("---offset size ---");
	console.log("width:"  + size_obj.offsetWidth  ); // 468 (424 + 21 + 23)
	console.log("height:" + size_obj.offsetHeight ); // 372 (326 + 22 + 24)

	console.log("--- padding ---");
	console.log("left:"   + size_obj.paddingLeft  ); // 11
	console.log("top:"    + size_obj.paddingTop   ); // 12
	console.log("right:"  + size_obj.paddingRight ); // 13
	console.log("bottom:" + size_obj.paddingBottom); // 14

	console.log("--- border ---");
	console.log("left:"   + size_obj.borderLeft  ); // 21
	console.log("top:"    + size_obj.borderTop   ); // 22
	console.log("right:"  + size_obj.borderRight ); // 23
	console.log("bottom:" + size_obj.borderBottom); // 24

	console.log("--- margin ---");
	console.log("left:"   + size_obj.marginLeft  ); // 31
	console.log("top:"    + size_obj.marginTop   ); // 32
	console.log("right:"  + size_obj.marginRight ); // 33
	console.log("bottom:" + size_obj.marginBottom); // 34

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

エレメントの透明度について

　


■エレメントを半透明にする

　
エレメントに半透明を設定するには、スタイルシートの opacity を使用します。
　
0.0 〜 1.0 までの値を指定します。
　
エレメントに透明度を設定する

<html>
  <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>
　
　
■Internet Explorer 8 以前の場合
　
スタイルシートの opacity は、Internet Explorer 8 以前では利用できません。
　
かわりに、スタイルシートの filter を使用します。（Internet Explorer 専用）
　
0 〜 100 までの数値を指定します。
　
エレメントに透明度を設定する

<html>
  <body>

    <div id="aaa" style="filter:alpha(opacity=70); position:absolute; width:300px; height:200px; left:50px;  top:100px; border:10px solid #000; background-color:#f44;" ></div>
    <div id="bbb" style="filter:alpha(opacity=100); position:absolute; width:300px; height:200px; left:150px; top:200px; border:10px solid #000; background-color:#44f;" ></div>

    <script type="text/javascript">
    <!--

	// bbb という ID 属性のエレメントを取得する
	var element = document.getElementById("bbb");
	
	// 透明度を設定する
	element.style.filter = "alpha(opacity=" + (50) + ")";

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

エレメントとの当たり判定について

　
■任意の座標を指定して、重なるエレメントを取得する（隠れた部分は除外）
■任意のエレメントと、マウス座標との当たり判定を調べる（隠れた部分は除外）
■任意のエレメントと、座標との当たり判定を調べる（隠れた部分を含む）
■任意のエレメントと、矩形との当たり判定を調べる（隠れた部分を含む）
　


■任意の座標を指定して、重なるエレメントを取得する（隠れた部分は除外）

　
クライアント座標を指定して、座標（点）と重なるエレメントを取得するには、elementFromPoint() メソッドを使用します。
　
ドキュメントのノードリストに登録されている、すべての DOM オブジェクトとヒットテストを試みます。
　
複数のエレメントとヒットしている場合、最も手前にあるエレメントのみ取得することができます。
　
ユーザーから見てエレメントが隠れている部分は、当たり判定から除外されます。
　
マウスカーソルとエレメントとの当たり判定に利用すると最適です。
　
Document.elementFromPoint( x座標 , y座標 ) :Element
第01引数 Numberクライアント座標系の水平位置を指定。
第02引数 Numberクライアント座標系の垂直位置を指定。
戻り値 Element指定した座標と重なるエレメントが得られる。存在しない場合は、null が得られる。
　
マウスボタンを押した時に、マウス直下にあるエレメントを取得する

<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#fcc;"></div>
    <div id="bbb" style="position:absolute; left:200px; top:200px; width:200px; height:200px; background:#cfc;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:300px; width:300px; height:300px; background:#ccf;"></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// マウスボタンを押したときに実行されるイベント
	// ------------------------------------------------------------
	document.onmousedown = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// クライアント座標系を基点としたマウスカーソルの座標を取得
		// ------------------------------------------------------------
		var mouse_x = e.clientX;
		var mouse_y = e.clientY;

		// ------------------------------------------------------------
		// クライアント座標とヒットするエレメントを取得
		// ------------------------------------------------------------
		var element = document.elementFromPoint(mouse_x,mouse_y);
		if(element){
			// 出力テスト
			console.log("name:" + element.nodeName + " id:" + element.id + "(" + element + ")");
		}
	};

    //-->
    </script>

  </body>
</html>
　

■任意のエレメントと、マウス座標との当たり判定を調べる（隠れた部分は除外）

　
■任意のエレメントと、マウス座標（クライアント座標系）との当たり判定を調べる関数
　
任意のエレメントと、マウス座標（クライアント座標系）との当たり判定を調べる関数です。
　
ユーザーから見てエレメントが隠れている部分は、当たり判定の対象となりません。
　
第01引数に、エレメントを指定。
　
第02引数に、クライアント座標系の水平位置を指定。
　
第03引数に、クライアント座標系の垂直位置を指定。
　
ヒットしていれば true が得られます。ヒットしていなければ false が得られます。
　
任意のエレメントと、座標（クライアント座標系）との当たり判定を調べる関数

// ------------------------------------------------------------
// 任意のエレメントと、マウス座標（クライアント座標系）との当たり判定を調べる関数
// ------------------------------------------------------------
function ElementHitTestMousePoint(element,left,top){
	
	var document_obj = element.ownerDocument;
	if(!document_obj)	return false;

	var node = document_obj.elementFromPoint(left,top);
	while(node){
		if(node == element){
			return true;
		}
		node = node.parentNode;
	}
	return false;
}
　
■すべての子孫エレメントと当たり判定を調べる
　
任意のエレメントから、すべての 子孫 DOM オブジェクトを検索する方法は、こちらで解説しています。
　
マウスボタンを押した時に、マウス直下にある最前面エレメントを取得する

<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#fcc;"></div>
    <div id="bbb" style="position:absolute; left:200px; top:200px; width:200px; height:200px; background:#cfc;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:300px; width:300px; height:300px; background:#ccf;"></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}

	// ------------------------------------------------------------
	// 任意のエレメントと、マウス座標（クライアント座標系）との当たり判定を調べる関数
	// ------------------------------------------------------------
	function ElementHitTestMousePoint(element,left,top){
	
		var document_obj = element.ownerDocument;
		if(!document_obj)	return false;

		var node = document_obj.elementFromPoint(left,top);
		while(node){
			if(node == element){
				return true;
			}
			node = node.parentNode;
		}
		return false;
	}


	// ------------------------------------------------------------
	// マウスボタンを押したときに実行されるイベント
	// ------------------------------------------------------------
	document.onmousedown = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// クライアント座標系を基点としたマウスカーソルの座標を取得
		// ------------------------------------------------------------
		var mouse_x = e.clientX;
		var mouse_y = e.clientY;

		// ------------------------------------------------------------
		// コールバック関数を使って、BODY エレメントのすべての子孫を検索
		// ------------------------------------------------------------
		DomNodeFindAllDescendants(document.body,function (node){

			// エレメントである
			if(node.nodeType == 1){
				// エレメントとマウス座標との当たり判定
				if(ElementHitTestMousePoint(node,mouse_x,mouse_y)){
					// 出力テスト
					console.log("name:" + node.nodeName + " id:" + node.id + "(" + node + ")");
				}
			}

			// 検索を継続（任意のオブジェクトを返すと終了）
			return null;
		});
	};

    //-->
    </script>

  </body>
</html>
　

■任意のエレメントと、座標との当たり判定を調べる（隠れた部分を含む）

　
任意のエレメントと、座標（クライアント座標系）との当たり判定を調べるには、getClientRects() メソッドを使用します。
　
getClientRects() メソッドについては、こちらで解説しています。
　
■任意のエレメントと、座標（クライアント座標系）との当たり判定を調べる関数
　
任意のエレメントと、座標（クライアント座標系）との当たり判定を調べる関数です。
　
ユーザーから見てエレメントが隠れている部分も、当たり判定の対象となります。
　
第01引数に、エレメントを指定。
　
第02引数に、クライアント座標系の水平位置を指定。
　
第03引数に、クライアント座標系の垂直位置を指定。
　
ヒットしていれば true が得られます。ヒットしていなければ false が得られます。
　
任意のエレメントと、座標（クライアント座標系）との当たり判定を調べる関数

// ------------------------------------------------------------
// 任意のエレメントと、座標（クライアント座標系）との当たり判定を調べる関数
// ------------------------------------------------------------
function ElementHitTestPoint(element,left,top){

	// 複数の矩形サイズを取得する
	var list = element.getClientRects();

	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		var client_rect = list[i];

		// 点と矩形との当たり判定
		if(client_rect.bottom < top)	continue;
		if(client_rect.top > top)	continue;
		if(client_rect.right < left)	continue;
		if(client_rect.left > left)	continue;

		return true;
	}

	return false;
}
　
■すべての子孫エレメントと当たり判定を調べる
　
任意のエレメントから、すべての 子孫 DOM オブジェクトを検索する方法は、こちらで解説しています。
　
マウスボタンを押した時に、マウス直下にあるエレメントをすべて取得する

<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#fcc;"></div>
    <div id="bbb" style="position:absolute; left:200px; top:200px; width:200px; height:200px; background:#cfc;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:300px; width:300px; height:300px; background:#ccf;"></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}

	// ------------------------------------------------------------
	// 任意のエレメントと、座標（クライアント座標系）との当たり判定を調べる関数
	// ------------------------------------------------------------
	function ElementHitTestPoint(element,left,top){

		// 複数の矩形サイズを取得する
		var list = element.getClientRects();

		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			var client_rect = list[i];

			// 点と矩形との当たり判定
			if(client_rect.bottom < top)	continue;
			if(client_rect.top > top)	continue;
			if(client_rect.right < left)	continue;
			if(client_rect.left > left)	continue;

			return true;
		}

		return false;
	}


	// ------------------------------------------------------------
	// マウスボタンを押したときに実行されるイベント
	// ------------------------------------------------------------
	document.onmousedown = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// クライアント座標系を基点としたマウスカーソルの座標を取得
		// ------------------------------------------------------------
		var mouse_x = e.clientX;
		var mouse_y = e.clientY;

		// ------------------------------------------------------------
		// コールバック関数を使って、BODY エレメントのすべての子孫を検索
		// ------------------------------------------------------------
		DomNodeFindAllDescendants(document.body,function (node){

			// エレメントである
			if(node.nodeType == 1){
				// エレメントと座標との当たり判定
				if(ElementHitTestPoint(node,mouse_x,mouse_y)){
					// 出力テスト
					console.log("name:" + node.nodeName + " id:" + node.id + "(" + node + ")");
				}
			}

			// 検索を継続（任意のオブジェクトを返すと終了）
			return null;
		});
	};

    //-->
    </script>

  </body>
</html>
　

■任意のエレメントと、矩形との当たり判定を調べる（隠れた部分を含む）

　
任意のエレメントと、矩形との当たり判定を調べるには、getClientRects() メソッドを使用します。
　
getClientRects() メソッドについては、こちらで解説しています。
　
■任意のエレメントと、矩形（クライアント座標系）との当たり判定を調べる関数
　
任意のエレメントと、矩形（クライアント座標系）との当たり判定を調べる関数です。
　
ユーザーから見てエレメントが隠れている部分も、当たり判定の対象となります。
　
第01引数に、エレメントを指定。
　
第02引数に、クライアント座標系の水平位置を指定。
　
第03引数に、クライアント座標系の垂直位置を指定。
　
第04引数に、幅を指定。
　
第05引数に、高さを指定。
　
ヒットしていれば true が得られます。ヒットしていなければ false が得られます。
　
任意のエレメントと、矩形（クライアント座標系）との当たり判定を調べる関数

// ------------------------------------------------------------
// 任意のエレメントと、矩形（クライアント座標系）との当たり判定を調べる関数
// ------------------------------------------------------------
function ElementHitTestRectangle(element,left,top,width,height){

	var right = left + width;
	var bottom = top + height;

	// 複数の矩形サイズを取得する
	var list = element.getClientRects();

	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		var client_rect = list[i];

		// 矩形と矩形との当たり判定
		if(client_rect.bottom < top)	continue;
		if(client_rect.top > bottom)	continue;
		if(client_rect.right < left)	continue;
		if(client_rect.left > right)	continue;

		return true;
	}

	return false;
}
　
■すべての子孫エレメントと当たり判定を調べる
　
任意のエレメントから、すべての 子孫 DOM オブジェクトを検索する方法は、こちらで解説しています。
　
マウスボタンを押した時に、マウス直下にあるエレメントをすべて取得する

<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#fcc;"></div>
    <div id="bbb" style="position:absolute; left:200px; top:200px; width:200px; height:200px; background:#cfc;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:300px; width:300px; height:300px; background:#ccf;"></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}

	// ------------------------------------------------------------
	// 任意のエレメントと、矩形（クライアント座標系）との当たり判定を調べる関数
	// ------------------------------------------------------------
	function ElementHitTestRectangle(element,left,top,width,height){

		var right = left + width;
		var bottom = top + height;

		// 複数の矩形サイズを取得する
		var list = element.getClientRects();

		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			var client_rect = list[i];

			// 矩形と矩形との当たり判定
			if(client_rect.bottom < top)	continue;
			if(client_rect.top > bottom)	continue;
			if(client_rect.right < left)	continue;
			if(client_rect.left > right)	continue;

			return true;
		}

		return false;
	}


	// ------------------------------------------------------------
	// マウスボタンを押したときに実行されるイベント
	// ------------------------------------------------------------
	document.onmousedown = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// クライアント座標系を基点としたマウスカーソルの座標を取得
		// ------------------------------------------------------------
		var mouse_x = e.clientX;
		var mouse_y = e.clientY;

		// ------------------------------------------------------------
		// コールバック関数を使って、BODY エレメントのすべての子孫を検索
		// ------------------------------------------------------------
		DomNodeFindAllDescendants(document.body,function (node){

			// エレメントである
			if(node.nodeType == 1){
				// エレメントと矩形との当たり判定
				if(ElementHitTestRectangle(node,mouse_x-20,mouse_y-20,40,40)){
					// 出力テスト
					console.log("name:" + node.nodeName + " id:" + node.id + "(" + node + ")");
				}
			}

			// 検索を継続（任意のオブジェクトを返すと終了）
			return null;
		});
	};

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

エレメントのトランスフォームについて

　


■エレメントのトランスフォームについて

　
エレメントをアフィン変換するには、スタイルの transform を使用します。
　
CSS Transforms については、こちらで解説しています。
　

上に戻る

　
前のページに戻る