要素の大きさ、位置の取得
要素の大きさや、位置を取得する方法を試してみます。
ここでは、要素の大きさや位置を getBoundingClientRect() を使って取得します。
このメソッドで取得できる値は、ビューポート座標での要素位置になります。
実際に下記のサンプルを書いて動作させてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div>
<div>ウィンドウサイズ(getBoundingClientRect) ：<span id="x1"></span></div>
</div>
<script type="text/javascript">
// ウィンドウ取得
let window_test = window;
//ロード時に一度呼ぶ
output_log_resize();
// リサイズされたらメソッド「output_log_resize」を呼ぶ
window.addEventListener('resize', output_log_resize);
// スクロール位置(X座標、Y座標)を出力する
function output_log_resize()
{
let x1 = document.getElementById("x1");
let cr = x1.getBoundingClientRect();
console.log("cr -> " + cr);
// オブジェクトの内容を確認する
for(var key in cr){
console.log(key + " : " + cr[key]);
}
// 要素を更新する
x1.innerHTML = cr;
console.log("window cr -> " + cr);
}
</script>
</body>
</html>
上記URLにアクセスして、ウィンドウの幅や高さを変えたタイミングで開発者ツールのログには、
以下のように出力されます。
cr -> [object DOMRect]
x : 8
y : 8
width : 884
height : 24
top : 8
right : 892
bottom : 32
left : 8
toJSON : function toJSON() { [native code] }
window cr -> [object DOMRect]
また、上記の出力を確認した後、ウィンドの幅や高さを変更してみました。
すると、以下の出力に変わりました。
cr -> [object DOMRect]
x : 8
y : 8
width : 1073
height : 24
top : 8
right : 1081
bottom : 32
left : 8
toJSON : function toJSON() { [native code] }
window cr -> [object DOMRect]
ブラウザの幅に応じて、divタグの幅も変わっていることがわかります。
ただし、ブラウザの幅と高さを変更しても、divタグの縦方向には広がらない為、
高さを合わらず数値は変化しないこともわかります。
また、この出力で特徴的なのが「DOMRect」というオブジェクトが返ることです。
DOMRectは矩形を管理する機能を備えたインターフェイスで、
単独で新規のDOMRectオブジェクトを生成する時は次のように記載します。
let domRect = new DOMRect(0, 0, 100, 100);
引数はそれぞれ、x座標、y座標、幅、高さ、を表し、
newで生成すると、引数で指定した大きさのDOMRectオブジェクトを生成されます。
今回のサンプルでは「getBoundingClientRect」メソッドを使って、
let x1 = document.getElementById("x1");
let cr = x1.getBoundingClientRect();
の箇所で、画面上のDOM要素「x1」のHTMLDOMを基準として、
要素の寸法と、ビューポートに対しての相対位置情報を取得していることが確認できます。