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

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

前のページに戻る

エレメントについて

■エレメントについて

■エレメントとは？

HTML や XML 文書における、要素（タグ）に相当します。

ブラウザ画面上に配置して表示できる、DOM オブジェクトの１つです。

タグ（要素）はエレメントとなる


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

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

<img src="http://example.com/test.jpg">

■アトリビュート（属性）の管理について

エレメントは、アトリビュート（属性）を管理することができます。

属性については、こちらで解説しています。

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

エレメントは、スタイル属性を保有しています。

スタイル宣言については、こちらで解説しています。

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

エレメントには、様々な種類があります。

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

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

HTML 文書のエレメントは、HTMLElement というインターフェースとなります。

このページでは主に、Element と HTMLElement インターフェースで供給される機能について解説しています。

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

Object

↓派生

EventTarget

↓派生

Node

↓派生

Element

↓派生

HTMLElement

上に戻る

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

■エレメントのプロパティ一覧（一部抜粋）

■ Element インターフェース

プロパティ名	型	説明
tagName	String	タグ名を取得する（読み取り専用）
scrollLeft	Number	エレメント内の水平方向のスクロール位置を設定する。
scrollTop	Number	エレメント内の垂直方向のスクロール位置を設定する。
scrollWidth	Number	エレメント内の幅を取得する。（読み取り専用）
scrollHeight	Number	エレメント内の高さを取得する。（読み取り専用）
clientLeft	Number	左側の border のサイズを取得する。（読み取り専用）
clientTop	Number	上側の border のサイズを取得する。（読み取り専用）
clientWidth	Number	ボーダーを含まない、エレメントの幅を取得する。（読み取り専用）
clientHeight	Number	ボーダーを含まない、エレメントの高さを取得する。（読み取り専用）

■ HTMLElement インターフェース

プロパティ名	型	説明
id	String	ID 属性を設定する
title	String	title 属性を設定する
lang	String	lang 属性を設定する
dir	String	dir 属性を設定する
className	String	クラス属性を設定する
offsetParent	Element	原点となる親エレメントを取得する。（読み取り専用）
offsetLeft	Number	親エレメントを原点とした、水平方向の位置を取得する。（読み取り専用）
offsetTop	Number	親エレメントを原点とした、垂直方向の位置を取得する。（読み取り専用）
offsetWidth	Number	ボーダーを含む、エレメントの幅を取得する。（読み取り専用）
offsetHeight	Number	ボーダーを含む、エレメントの高さを取得する。（読み取り専用）

■エレメントからタグ名を取得する

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() メソッドを使用します。

Attr オブジェクトを作成し、属性値を設定する


// ------------------------------------------------------------
// Attr オブジェクトを作成する
// ------------------------------------------------------------
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 オブジェクトを指定）

setAttributeNode() メソッドを使用します。

Element.setAttributeNode( Attr ) :Attr

第01引数	Attr	登録したい「Attr オブジェクト」を指定。
戻り値	Attr	新規に属性名を登録する場合は、null が得られる。既存の属性名が上書きされた場合は、古い Attr オブジェクトが得られる。

エレメントに「Attr オブジェクト」を登録する


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

// ------------------------------------------------------------
// Attr オブジェクトを作成する
// ------------------------------------------------------------
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 オブジェクトを取得する

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 オブジェクトを指定）

removeAttributeNode() メソッドを使用します。

未登録である Attr オブジェクトを指定すると、エラーが発生します。

Element.removeAttributeNode( Attr ) :Attr

第01引数	Attr	除外したい「Attr オブジェクト」を指定する。
戻り値	Attr	除外した「Attr オブジェクト」が得られる。

エレメントから「Attr オブジェクト」を除外する


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

// ------------------------------------------------------------
// Attr オブジェクトを作成する
// ------------------------------------------------------------
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 オブジェクトを取得する

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 オブジェクトを使用します。

使い方は、こちらで解説しています。

エレメントのスタイルを設定する


// ------------------------------------------------------------
// エレメントを作成する
// ------------------------------------------------------------
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() メソッドを使用します。

AbstractView.getComputedStyle( エレメント , "擬似要素" ) :CSSStyleDeclaration

第01引数	Element	調べたいエレメントを指定する。
第02引数(略可)	String	擬似要素を文字列で指定。例えば ":first-letter"、":after" など。
戻り値	CSSStyleDeclaration	CSSStyleDeclaration オブジェクトが得られる。（読み取りアクセスのみ可能）

■戻り値（CSSStyleDeclaration オブジェクト）

戻り値から、CSSStyleDeclaration オブジェクトが得られます。

読み取りアクセスのみ可能です。

読み取り方法については、こちらで解説しています。

■ InternetExplorer 8 以前の場合

getComputedStyle() メソッドに対応していません。

かわりに、currentStyle プロパティを使用します。

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


// ------------------------------------------------------------
// エレメントに適用されているスタイルをすべて取得する関数
// ------------------------------------------------------------
function ElementGetComputedStyle(element , pseudo_element){
	return (function(){
		var d = element.ownerDocument;
		if(!d) return null;
		var w = d.defaultView;
		if(!w) return null;
		if(!w.getComputedStyle) return null;
		return w.getComputedStyle(element , pseudo_element);
	})() || element.currentStyle || 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){
		return (function(){
			var d = element.ownerDocument;
			if(!d) return null;
			var w = d.defaultView;
			if(!w) return null;
			if(!w.getComputedStyle) return null;
			return w.getComputedStyle(element , pseudo_element);
		})() || element.currentStyle || null;
	}

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

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

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

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

    //-->
    </script>

  </body>
</html>

上に戻る

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

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

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

■エレメント内（スクロールビュー）のサイズを取得する

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

■ウィンドウのスクロールについて（Window）

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

■デフォルトでスクロールバーが表示されるタグ（一部抜粋）

■スクロールバーを表示できる要素について

エレメントが、ブロックレベル要素である必要があります。

<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);

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

以下のプロパティを使用します。

プロパティ名	型	説明
scrollLeft	Number	エレメント内の水平方向のスクロール位置を設定する。(単位:ピクセル)
scrollTop	Number	エレメント内の垂直方向のスクロール位置を設定する。(単位:ピクセル)

■設定可能なスクロールの範囲について

水平方向の最小値は、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>

■エレメント内（スクロールビュー）のサイズを取得する

以下のプロパティを使用します。

プロパティ名	型	説明
scrollWidth	Number	エレメント内の幅を取得する。(単位:ピクセル)
scrollHeight	Number	エレメント内の高さを取得する。(単位:ピクセル)

■最小のサイズについて

エレメント内の幅が、エレメントの幅より小さいことがあります。

この場合、得られる値は 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( alignWithTop ) :Void

第01引数(略可)	Boolean	デフォルトは 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">
    <!--
	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var element_a = document.getElementById("aaa");
	var element_b = document.getElementById("bbb");
	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	独立したレイヤーに配置されます。絶対的な座標値を指定して、要素を自由に配置できます。
fixed	ブラウザのクライアント領域に配置されます。スクロールに関係なく、画面に固定され続けます。

■設定例

動的に 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; について

■基礎的な動作について

static は、デフォルトの状態です。

■周囲の要素への影響について

自身には、見た目通りの存在矩形が存在します。

エレメント同士が重なる事はありません。

押し出しが発生し、位置が自動的に補正されます。

■ position:relative; について

■基礎的な動作について

static と同じように動作します。

■相対位置の変更について

デフォルトの配置状態（static）が、原点となります。

そこから、相対的に位置を変更することができます。

■周囲の要素への影響について

位置をずらした場合、見た目は変化します。

しかし、存在矩形自体は、デフォルトの場所にそのまま残ります。

よって、レイアウト全体は崩れません。

他の要素を押し出す事は無く、手前に重なって描画されます。

■動作を確認する

■ position:absolute; について

■基礎的な動作について

別レイヤーに存在するかのように、完全に独立しています。

絶対的な座標値を指定して、要素を自由に配置できます。

■周囲の要素への影響について

自身に、存在矩形はありません。

他の要素を押し出す事は無く、手前に重なって描画されます。

自身は、親に内包されなくなります。

■原点について

自身から祖先へと順番に調べます。

position が static 以外となる要素が存在する場合、そこが原点となります。

一切存在しない場合は、ドキュメント全体の、左上が原点となります。

■任意の祖先エレメントを原点化するには？

その要素に、relative を指定するといいでしょう。

■動作を確認する

■ position:fixed; について

■基礎的な動作について

クライアント領域に配置することができます。

スクロールに関係なく、常に画面に固定（fixed）されます。

別レイヤーに存在するかのように、完全に独立しています。

■原点について

クライアント領域の左上が、原点となります。

■周囲の要素への影響について

自身に、存在矩形はありません。

他の要素を押し出す事はなく、手前に重なって描画されます。

自身は、親に内包されなくなります。

■サポートについて

Internet Explorer 6 以前では、対応していません。

■エレメントを移動する

１．エレメントの配置を設定する

デフォルトの状態では、位置を制御する事はできません。

エレメントの配置を設定する必要があります。

スタイルシートの position を、static 以外に設定します。

２．水平位置を設定する

スタイルシートの 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);

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

１．ClientRectList オブジェクトを取得する

getClientRects() メソッドを使用します。

ClientRectList オブジェクトが得られます。

２．ClientRect オブジェクトを取得する

0 番地に格納されている ClientRect オブジェクトを取得します。

存在しない場合もあります。

３．位置情報を取得する

以下のプロパティを使用します。

プロパティ名	型	説明
left	Number	左側の位置を取得する。（クライアント座標系）
top	Number	上側の位置を取得する。（クライアント座標系）

■基点について

エレメントの基点は、border の外側から開始します。

スタイルシートの left や top とは、異なるので注意して下さい。

■取得例

エレメントのクライアント座標系の位置を取得する


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

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

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

// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
// 座標
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 rects = element.getClientRects();

	// ------------------------------------------------------------
	// 0 番目の ClientRect オブジェクトを取得する
	// ------------------------------------------------------------
	var client_rect = rects[0];
	if(!client_rect) return;

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

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

},1000/30);

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

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

こちらで解説しています。

２．ブラウザのスクロール位置を取得する

こちらで解説しています。

３．グローバル座標系に変換する

「クライアント座標」と「スクロール位置」を加算します。

すると、「グローバル座標」に変換できます。

■取得例

エレメントのグローバル座標系の位置を取得する


// ------------------------------------------------------------
// スクロール位置を取得する関数
// ------------------------------------------------------------
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");

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

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

// ------------------------------------------------------------
// 初期化
// ------------------------------------------------------------
// 座標
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 rects = element.getClientRects();

	// ------------------------------------------------------------
	// 0 番目の ClientRect オブジェクトを取得する
	// ------------------------------------------------------------
	var client_rect = rects[0];
	if(!client_rect) return;

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

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

	// ------------------------------------------------------------
	// グローバル座標系に変換する
	// ------------------------------------------------------------
	var gx = cx + scroll_pos.x;
	var gy = cy + scroll_pos.y;

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

},1000/30);

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

１．要素に適用されているスタイルをすべて取得する

window.getComputedStyle() メソッドを使用します。

CSSStyleDeclaration オブジェクトが得られます。

２．スタイルから位置に関連する情報を取得する

プロパティ名	型	説明
left	String	左端の配置位置を取得する。（水平方向）
top	String	上端の配置位置を取得する。（垂直方向）
bottom	String	下端の配置位置を取得する。（垂直方向）
right	String	右端の配置位置を取得する。（水平方向）

■得られる位置情報について

単位は、ピクセル(px) に変換されています。

Internet Explorer 8 以下の場合は、単位情報はそのままです。

実際の要素の位置と、必ずしも一致するとは限りません。

position が static である場合、設定値がそのまま得られます。

何も設定していない場合、"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){
		return (function(){
			var d = element.ownerDocument;
			if(!d) return null;
			var w = d.defaultView;
			if(!w) return null;
			if(!w.getComputedStyle) return null;
			return w.getComputedStyle(element , pseudo_element);
		})() || element.currentStyle || 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>

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

以下のプロパティを使用します。

プロパティ名	型	説明
offsetLeft	Number	親エレメントを原点とした、水平方向の位置を取得する。(単位:ピクセル)（読み取り専用）
offsetTop	Number	親エレメントを原点とした、垂直方向の位置を取得する。(単位:ピクセル)（読み取り専用）

■原点となる親エレメントを取得する

offsetParent プロパティを使用します。

■親となる条件について

必ずしも１つ上の要素が該当するとは限りません。

自身から祖先へと順番に調べます。

position が static 以外となる要素が存在する場合、それが親となります。

一切存在しない場合は、<BODY> 要素が親となります。

ドキュメント全体の、左上が原点となります。

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 となります。

■表示優先度（奥行き）について

z-index が大きいほど手前に表示され、小さいほど奥に表示されます。

同じ値を指定した場合は、ノードリストの最先頭であるほど奥に表示され、最後尾であるほど手前に表示されます。

■設定例

動的に zIndex を変更する


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

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

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
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");

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

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
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";

上に戻る

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

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

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

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

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

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

■エレメントの各サイズを取得する（プロパティ）

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

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

■サイズの変更ができない要素について

インライン要素かつ非置換要素である場合、幅と高さが変更できません。

■サイズ変更が可能な要素の一例

<DIV> <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);

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

１．サイズ変更可能な要素であるか確認する

こちらで解説しています。

２．エレメントのサイズを可変化する

スタイルシートの width に、auto を指定します。

スタイルシートの height に、auto を指定します。

３．エレメントの配置を設定する

スタイルシートの position に、absolute か fixed を設定します。

４．エレメントの配置位置を設定する

プロパティ名	型	説明
left	String	左端の配置位置を設定する。（水平方向）
top	String	上端の配置位置を設定する。（垂直方向）
bottom	String	下端の配置位置を設定する。（垂直方向）
right	String	右端の配置位置を設定する。（水平方向）

■基点について

親の基点は、border の内側から開始します。親の padding は無視されます。

子の基点は、margin の外側から開始します。

■配置位置の単位について

ピクセル単位で変更したい場合は、"px" を付加します。

パーセント単位で変更したい場合は、"%" を付加します。

数値だけを指定する事はできません。

例えば、123 という値を指定したい場合は、『 123 + "px" 』となります。

■設定例

端からの距離を指定して、エレメントの幅と高さを設定する


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

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

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
style.position  = "fixed";
style.width  = "auto";
style.height = "auto";
style.left   = (100) + "px";
style.top    = (50)  + "px";
style.right  = (200) + "px";
style.bottom = (150) + "px";
style.border = "10px #A00 solid";
style.backgroundColor = "#F88";

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

■エレメントをクライアント領域全体に表示する

１．サイズ変更方法を確認する（端からの距離を指定）

こちらで解説しています。

２．エレメントの配置位置を設定する

スタイルシートの left、right、top、bottom を使用します。

0px を指定します。

■作成例

エレメントをクライアント領域全体に表示する


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

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

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
style.position  = "fixed";
style.width  = "auto";
style.height = "auto";
style.left   = (0) + "px";
style.top    = (0) + "px";
style.right  = (0) + "px";
style.bottom = (0) + "px";
style.border = "10px #A00 solid";
style.backgroundColor = "#F88";

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

■動作を確認する

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

getBoundingClientRect() メソッドを使用します。

このメソッドは信頼性が高く、利用を特にオススメします。

Internet Explorer 6 などのレガシーブラウザでも、正確に動作します。

Element.getBoundingClientRect( ) :ClientRect

引数	Void	なし。
戻り値	ClientRect	新しい ClientRect オブジェクトが得られる。

■戻り値（ClientRect オブジェクト）

こちらで解説しています。

■矩形の範囲について

エレメントは、必ずしも１つの矩形状態になるとは限りません。

例えば、インライン要素の場合、文章が折り返され２つ以上に分離されて表示されることがあります。

getBoundingClientRect() メソッドは、ボーダーをすべて囲む１つの矩形が得られます。

■計算不可能だった場合

すべての値が 0 となる、ClientRect オブジェクトが得られます。

自身がノードリストに登録されていない場合などで発生します。

■取得例

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


<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() メソッドを使用します。

このメソッドは信頼性が高く、利用を特にオススメします。

Internet Explorer 6 などのレガシーブラウザでも、正確に動作します。

Element.getClientRects( ) :ClientRectList

引数	Void	なし。
戻り値	ClientRectList	新しい ClientRectList オブジェクトが得られる。

■戻り値（ClientRectList オブジェクト）

配列のように中身を取り出せます。

中には、ClientRect オブジェクトが格納されています。

■ ClientRect オブジェクトについて

こちらで解説しています。

■矩形の範囲について

エレメントは、必ずしも１つの矩形状態になるとは限りません。

例えば、インライン要素の場合、文章が折り返され２つ以上に分離されて表示されることがあります。

getClientRects() メソッドは、分離状態となっているすべての矩形が得られます。

■計算不可能だった場合

空の ClientRectList オブジェクトが得られます。

自身がノードリストに登録されていない場合などで発生します。

■取得例

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


<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 rects = element.getClientRects();

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = rects.length;
	for(i=0;i < num;i++){

		// ClientRect オブジェクトを取得する
		var client_rect = rects[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 インターフェースについて

■プロパティ一覧（読み取り専用）

プロパティ名	型	説明
top	Number	上側の位置を取得する。（クライアント座標系）
bottom	Number	下側の位置を取得する。（クライアント座標系）
left	Number	左側の位置を取得する。（クライアント座標系）
right	Number	右側の位置を取得する。（クライアント座標系）
width	Number	ボーダーを含む、幅を取得する。（right - left）と同等。
height	Number	ボーダーを含む、高さを取得する。（bottom - top）と同等。

■基点について

right プロパティは、左からの距離である事に注意して下さい。

bottom プロパティは、上からの距離である事に注意して下さい。

■Internet Explorer 8 以前の場合

width と height プロパティは、未対応です。

■取得例

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>
  <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>

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

以下のプロパティを使用します。

プロパティ名	型	説明
clientWidth	Number	ボーダーを含まない、エレメントの幅を取得する。（読み取り専用）
clientHeight	Number	ボーダーを含まない、エレメントの高さを取得する。（読み取り専用）
offsetWidth	Number	ボーダーを含む、エレメントの幅を取得する。（読み取り専用）
offsetHeight	Number	ボーダーを含む、エレメントの高さを取得する。（読み取り専用）
clientLeft	Number	左側の border のサイズを取得する。（読み取り専用）
clientTop	Number	上側の border のサイズを取得する。（読み取り専用）

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

以下のプロパティを使用します。

プロパティ名	型	説明
clientWidth	Number	ボーダーを含まない、エレメントの幅を取得する。（読み取り専用）
clientHeight	Number	ボーダーを含まない、エレメントの高さを取得する。（読み取り専用）

■測定方法

このプロパティは、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>

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

以下のプロパティを使用します。

プロパティ名	型	説明
offsetWidth	Number	ボーダーを含む、エレメントの幅を取得する。（読み取り専用）
offsetHeight	Number	ボーダーを含む、エレメントの高さを取得する。（読み取り専用）

■測定方法

このプロパティは、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>

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

ボーダーのサイズを取得するには、以下のプロパティを使用します。

プロパティ名	型	説明
clientLeft	Number	左側の border のサイズを取得する。（読み取り専用）
clientTop	Number	上側の border のサイズを取得する。（読み取り専用）

■スクロールバーに注意

左側に、スクロールバーが存在する場合、結果に含まれるので注意して下さい。

■右側の border サイズを取得する

offsetWidth - (clientWidth + clientLeft) を計算します。

結果は、clientRight に相当する値となります。

右側に、スクロールバーが存在する場合、結果に含まれます。

■下側の border サイズを取得する

offsetHeight - (clientHeight + clientTop) を計算します。

結果は、clientBottom に相当する値となります。

下側に、スクロールバーが存在する場合、結果に含まれます。

■取得例

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


<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() メソッドを使用します。

CSSStyleDeclaration オブジェクトが得られます。

２．スタイルからサイズに関連する情報を取得する

プロパティ名	型	説明
width	String	幅を取得する。
height	String	高さを取得する。

プロパティ名	型	説明
paddingLeft	String	左パディングの長さを取得する
paddingTop	String	上パディングの長さを取得する
paddingRight	String	右パディングの長さを取得する
paddingBottom	String	下パディングの長さを取得する

プロパティ名	型	説明
borderLeftWidth	String	左ボーダーの太さを取得する
borderTopWidth	String	上ボーダーの太さを取得する
borderRightWidth	String	右ボーダーの太さを取得する
borderBottomWidth	String	下ボーダーの太さを取得する

プロパティ名	型	説明
marginLeft	String	左マージンの長さを取得する
marginTop	String	上マージンの長さを取得する
marginRight	String	右マージンの長さを取得する
marginBottom	String	下マージンの長さを取得する

■得られるサイズ情報について

単位は、ピクセル(px) に変換されています。

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){
		return (function(){
			var d = element.ownerDocument;
			if(!d) return null;
			var w = d.defaultView;
			if(!w) return null;
			if(!w.getComputedStyle) return null;
			return w.getComputedStyle(element , pseudo_element);
		})() || element.currentStyle || 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">
    <!--

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

	// ------------------------------------------------------------
	// 透明度を設定する
	// ------------------------------------------------------------
	element.style.opacity = 0.5;

    //-->
    </script>

  </body>
</html>

■Internet Explorer 8 以前の場合

スタイルシートの opacity は、対応していません。

かわりに、スタイルシートの 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>

上に戻る

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

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

■座標を指定して、重なるエレメントを全部取得する（隠れた部分を含む）

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

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

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

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

document.elementFromPoint() メソッドを使用します。

マウスカーソルとエレメントとの当たり判定を調べるのに最適です。

Document.elementFromPoint( x座標 , y座標 ) :Element

第01引数	Number	クライアント座標系の水平位置を指定。
第02引数	Number	クライアント座標系の垂直位置を指定。
戻り値	Element	指定した座標と重なるエレメントが得られる。存在しない場合は、null が得られる。

■評価について

<HTML> <BODY> 要素なども、比較対象に含まれます。

複数の要素とマッチする場合、最も手前の要素のみが検出されます。

ユーザーから見て、奥に隠れている要素は検出できません。

■使用例

マウスボタンを押した時に、マウス直下にあるエレメントを取得する


<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#666; opacity:0.7;"></div>
    <div id="bbb" style="position:absolute; left:250px; top:100px; width:200px; height:200px; background:#f66; opacity:0.7;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:150px; width:300px; height:300px; background:#6f6; opacity:0.7;"></div>
    <div id="ddd" style="position:absolute; left:350px; top:250px; width:400px; height:400px; background:#66f; opacity:0.7;"></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) return;

		// ------------------------------------------------------------
		// 出力テスト
		// ------------------------------------------------------------
		console.log( element );
		console.log( "name:" + element.nodeName );
		console.log( "id:" + element.id );
	};

    //-->
    </script>

  </body>
</html>

■座標を指定して、重なるエレメントを全部取得する（隠れた部分を含む）

document.elementsFromPoint() メソッドを使用します。

このメソッドは、一部のブラウザでのみ対応しています。

CSSOM View で追加された新仕様です。

Document.elementsFromPoint( x座標 , y座標 ) :Array

第01引数	Number	クライアント座標系の水平位置を指定。
第02引数	Number	クライアント座標系の垂直位置を指定。
戻り値	Array	指定した座標と重なるエレメントがまとめて得られる。

■評価について

<HTML> <BODY> 要素なども、比較対象に含まれます。

複数の要素とマッチする場合、それらすべての要素が得られます。

ユーザーから見て、奥に隠れている要素もすべて検出されます。

手前から奥に向かって、昇順に格納されます。

0 番目に近いほど、手前となります。

■使用例

マウスボタンを押した時に、マウス直下にあるエレメントを取得する


<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#666; opacity:0.7;"></div>
    <div id="bbb" style="position:absolute; left:250px; top:100px; width:200px; height:200px; background:#f66; opacity:0.7;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:150px; width:300px; height:300px; background:#6f6; opacity:0.7;"></div>
    <div id="ddd" style="position:absolute; left:350px; top:250px; width:400px; height:400px; background:#66f; opacity:0.7;"></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 elements = document.elementsFromPoint(mouse_x , mouse_y);

		// ------------------------------------------------------------
		// 出力テスト
		// ------------------------------------------------------------
		var i;
		var num = elements.length;
		for(i=0;i < num;i++){
			var element = elements[i];
			console.log( element );
		}
	};

    //-->
    </script>

  </body>
</html>

■代替関数

Internet Explorer 6 でも動作する代替関数です。

z-index は考慮しません。

Document_ElementsFromPoint( document , x , y ) :Array

第01引数	Document	ドキュメントを指定。
第02引数	Number	水平位置を指定。（クライアント座標系）
第03引数	Number	垂直位置を指定。（クライアント座標系）
戻り値	Array	指定した座標と重なるエレメントがまとめて得られる。

座標を指定して、重なるエレメントを全部取得する関数


// ------------------------------------------------------------
// 座標を指定して、重なるエレメントを全部取得する関数
// ------------------------------------------------------------
function Document_ElementsFromPoint(document_obj , x , y){
	var elements = new Array();
	function f(n){
		if(n.nodeType != 1) return;
		var i;
		var num;
		var nodes = n.childNodes;
		var rects = n.getClientRects();
		num = nodes.length;
		for(i=num-1;i >= 0;i--){
			f(nodes[i]);
		}
		num = rects.length;
		for(i=0;i < num;i++){
			var r = rects[i];
			if(r.bottom < y) continue;
			if(r.top    > y) continue;
			if(r.right  < x) continue;
			if(r.left   > x) continue;
			elements.push(n);
			break;
		}
	}
	f(document_obj.documentElement);
	return elements;
}

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

コンポーネントのような集合体と、マウスカーソルとの当たり判定を調べます。

指定した要素の子孫も、評価対象となります。

ユーザーから見て隠れている部分は、判定から除外されます。

マウスイベントのような当たり判定を、再現できるでしょう。

■要素とマウス座標との当たり判定を調べる関数（隠れた部分は除外）

Element_HitTest_MousePoint( element , x , y , deep ) :Boolean

第01引数	Element	エレメントを指定。（子孫も評価対象となる）
第02引数	Number	水平位置を指定。（クライアント座標系）
第03引数	Number	垂直位置を指定。（クライアント座標系）
第04引数(略可)	Boolean	子孫も評価対象に含めるなら true。デフォルトは true。
戻り値	Boolean	ヒットしていれば true が得られます。

要素とマウス座標との当たり判定を調べる関数（隠れた部分は除外）


// ------------------------------------------------------------
// 要素とマウス座標との当たり判定を調べる関数（隠れた部分は除外）
// ------------------------------------------------------------
function Element_HitTest_MousePoint(element , x , y , deep){
	deep = (arguments.length >= 4) ? Boolean(deep) : true;
	var doc = element.ownerDocument;
	if(!doc) return false;
	var node = doc.elementFromPoint(x , y);
	if(!deep) return (node === element);
	while(node){
		if(node === element) return true;
		node = node.parentNode;
	}
	return false;
}

■使用例

要素とマウス座標との当たり判定を調べる


<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#666; opacity:0.7;"></div>
    <div id="bbb" style="position:absolute; left:250px; top:100px; width:200px; height:200px; background:#666; opacity:0.7;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:150px; width:300px; height:300px; background:#f66; opacity:0.7;"></div>
    <div id="ddd" style="position:absolute; left:350px; top:250px; width:400px; height:400px; background:#666; opacity:0.7;"></div>

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

	// ------------------------------------------------------------
	// 要素とマウス座標との当たり判定を調べる関数（隠れた部分は除外）
	// ------------------------------------------------------------
	function Element_HitTest_MousePoint(element , x , y , deep){
		deep = (arguments.length >= 4) ? Boolean(deep) : true;
		var doc = element.ownerDocument;
		if(!doc) return false;
		var node = doc.elementFromPoint(x , y);
		if(!deep) return (node === element);
		while(node){
			if(node === element) return true;
			node = node.parentNode;
		}
		return false;
	}

	// ------------------------------------------------------------
	// マウスを移動するたびに実行されるイベント
	// ------------------------------------------------------------
	document.onmousemove = function (e){
		if(!e) e = window.event; // レガシー

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

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

		// ------------------------------------------------------------
		// 要素とマウス座標との当たり判定を調べる
		// ------------------------------------------------------------
		var result = Element_HitTest_MousePoint(element , mouse_x , mouse_y);

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

    //-->
    </script>

  </body>
</html>

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

コンポーネントのような集合体と、座標との当たり判定を調べます。

指定した要素の子孫も、評価対象となります。

ユーザーから見て隠れている部分も、当たり判定の対象となります。

■要素と座標との当たり判定を調べる関数（隠れた部分を含む）

Element_HitTest_Point( element , x , y , deep ) :Boolean

第01引数	Element	エレメントを指定。（子孫も評価対象となる）
第02引数	Number	水平位置を指定。（クライアント座標系）
第03引数	Number	垂直位置を指定。（クライアント座標系）
第04引数(略可)	Boolean	子孫も評価対象に含めるなら true。デフォルトは true。
戻り値	Boolean	ヒットしていれば true が得られます。

要素と座標との当たり判定を調べる関数（隠れた部分を含む）


// ------------------------------------------------------------
// 要素と座標との当たり判定を調べる関数（隠れた部分を含む）
// ------------------------------------------------------------
function Element_HitTest_Point(element , x , y , deep){
	deep = (arguments.length >= 4) ? Boolean(deep) : true;
	function f(n){
		if(n.nodeType != 1) return false;
		var i;
		var num;
		var rects = n.getClientRects();
		var nodes = n.childNodes;

		num = rects.length;
		for(i=0;i < num;i++){
			var r = rects[i];
			if(r.bottom < y) continue;
			if(r.top    > y) continue;
			if(r.right  < x) continue;
			if(r.left   > x) continue;
			return true;
		}

		if(!deep) return false;
		num = nodes.length;
		for(i=0;i < num;i++){
			if(f(nodes[i])) return true;
		}
		return false;
	}
	return f(element);
}

■使用例

要素と座標との当たり判定を調べる


<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#666; opacity:0.7;"></div>
    <div id="bbb" style="position:absolute; left:250px; top:100px; width:200px; height:200px; background:#666; opacity:0.7;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:150px; width:300px; height:300px; background:#f66; opacity:0.7;"></div>
    <div id="ddd" style="position:absolute; left:350px; top:250px; width:400px; height:400px; background:#666; opacity:0.7;"></div>

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

	// ------------------------------------------------------------
	// 要素と座標との当たり判定を調べる関数（隠れた部分を含む）
	// ------------------------------------------------------------
	function Element_HitTest_Point(element , x , y , deep){
		deep = (arguments.length >= 4) ? Boolean(deep) : true;
		function f(n){
			if(n.nodeType != 1) return false;
			var i;
			var num;
			var rects = n.getClientRects();
			var nodes = n.childNodes;

			num = rects.length;
			for(i=0;i < num;i++){
				var r = rects[i];
				if(r.bottom < y) continue;
				if(r.top    > y) continue;
				if(r.right  < x) continue;
				if(r.left   > x) continue;
				return true;
			}

			if(!deep) return false;
			num = nodes.length;
			for(i=0;i < num;i++){
				if(f(nodes[i])) return true;
			}
			return false;
		}
		return f(element);
	}

	// ------------------------------------------------------------
	// マウスを移動するたびに実行されるイベント
	// ------------------------------------------------------------
	document.onmousemove = function (e){
		if(!e) e = window.event; // レガシー

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

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

		// ------------------------------------------------------------
		// 要素と座標との当たり判定を調べる
		// ------------------------------------------------------------
		var result = Element_HitTest_Point(element , mouse_x , mouse_y);

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

    //-->
    </script>

  </body>
</html>

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

コンポーネントのような集合体と、矩形との当たり判定を調べます。

指定した要素の子孫も、評価対象となります。

ユーザーから見て隠れている部分も、当たり判定の対象となります。

■要素と矩形との当たり判定を調べる関数（隠れた部分を含む）

Element_HitTest_Rectangle( element , left , top , width , height , deep ) :Boolean

第01引数	Element	エレメントを指定。
第02引数	Number	（矩形）水平位置を指定。（クライアント座標系）
第03引数	Number	（矩形）垂直位置を指定。（クライアント座標系）
第04引数	Number	（矩形）幅を指定。
第05引数	Number	（矩形）高さを指定。
第06引数(略可)	Boolean	子孫も評価対象に含めるなら true。デフォルトは true。
戻り値	Boolean	ヒットしていれば true が得られます。

要素と矩形との当たり判定を調べる関数（隠れた部分を含む）


// ------------------------------------------------------------
// 要素と矩形との当たり判定を調べる関数（隠れた部分を含む）
// ------------------------------------------------------------
function Element_HitTest_Rectangle(element , left , top , width , height , deep){
	deep = (arguments.length >= 6) ? Boolean(deep) : true;
	var right  = left + width;
	var bottom = top + height;
	function f(n){
		if(n.nodeType != 1) return false;
		var i;
		var num;
		var rects = n.getClientRects();
		var nodes = n.childNodes;

		num = rects.length;
		for(i=0;i < num;i++){
			var r = rects[i];
			if(r.bottom < top) continue;
			if(r.top > bottom) continue;
			if(r.right < left) continue;
			if(r.left > right) continue;
			return true;
		}

		if(!deep) return false;
		num = nodes.length;
		for(i=0;i < num;i++){
			if(f(nodes[i])) return true;
		}
		return false;
	}
	return f(element);
}

■使用例

要素と矩形との当たり判定を調べる


<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background:#666; opacity:0.7;"></div>
    <div id="bbb" style="position:absolute; left:250px; top:100px; width:200px; height:200px; background:#666; opacity:0.7;"></div>
    <div id="ccc" style="position:absolute; left:300px; top:150px; width:300px; height:300px; background:#f66; opacity:0.7;"></div>
    <div id="ddd" style="position:absolute; left:350px; top:250px; width:400px; height:400px; background:#666; opacity:0.7;"></div>
    <div id="eee" style="position:absolute; left:0px; top:0px; width:60px; height:100px; background:#66f; opacity:0.7;"></div>

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

	// ------------------------------------------------------------
	// 要素と矩形との当たり判定を調べる関数（隠れた部分を含む）
	// ------------------------------------------------------------
	function Element_HitTest_Rectangle(element , left , top , width , height , deep){
		deep = (arguments.length >= 6) ? Boolean(deep) : true;
		var right  = left + width;
		var bottom = top + height;
		function f(n){
			if(n.nodeType != 1) return false;
			var i;
			var num;
			var rects = n.getClientRects();
			var nodes = n.childNodes;

			num = rects.length;
			for(i=0;i < num;i++){
				var r = rects[i];
				if(r.bottom < top) continue;
				if(r.top > bottom) continue;
				if(r.right < left) continue;
				if(r.left > right) continue;
				return true;
			}

			if(!deep) return false;
			num = nodes.length;
			for(i=0;i < num;i++){
				if(f(nodes[i])) return true;
			}
			return false;
		}
		return f(element);
	}

	// ------------------------------------------------------------
	// マウスを移動するたびに実行されるイベント
	// ------------------------------------------------------------
	document.onmousemove = function (e){
		if(!e) e = window.event; // レガシー

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

		// ------------------------------------------------------------
		// 各エレメントを取得する
		// ------------------------------------------------------------
		var element_c = document.getElementById("ccc");
		var element_e = document.getElementById("eee");

		// ------------------------------------------------------------
		// 当たり判定の矩形
		// ------------------------------------------------------------
		var rect = element_e.getBoundingClientRect();
		var rect_w = rect.right - rect.left;
		var rect_h = rect.bottom - rect.top;
		var rect_x = mouse_x - (rect_w * 0.5);
		var rect_y = mouse_y - (rect_h * 0.5);

		// ------------------------------------------------------------
		// 要素と矩形との当たり判定を調べる
		// ------------------------------------------------------------
		var result = Element_HitTest_Rectangle(element_c , rect_x , rect_y , rect_w , rect_h);

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

		// ------------------------------------------------------------
		// 要素の位置を変更する
		// ------------------------------------------------------------
		var style = element_e.style;
		style.left = (rect_x) + "px";
		style.top  = (rect_y) + "px";
	};

    //-->
    </script>

  </body>
</html>

上に戻る

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

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

エレメントをアフィン変換するには、スタイルの transform を使用します。

CSS Transforms については、こちらで解説しています。

上に戻る

前のページに戻る