要素の大きさ、位置の取得
要素の大きさや、位置を取得する方法を試してみます。
ここでは、要素の大きさや位置を 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を基準として、
要素の寸法と、ビューポートに対しての相対位置情報を取得していることが確認できます。