getBoundingClientRect を使って要素の座標情報を取得

概要

getBoundingClientRectの情報を見てみる

let image = (<HTMLAnchorElement>document.getElementById("image"));
let image_domRect = image.getBoundingClientRect();
console.log(image_domRect)

上述のコードを実行するとConsoleに下記の情報が表示される。

DOMRect {x: 677.484375, y: 269, width: 143.015625, height: 15, top: 269, …}
bottom: 284
height: 15
left: 677.484375
right: 820.5
top: 269
width: 143.015625
x: 677.484375
y: 269
__proto__: DOMRect

使用例

image_dialogというダイアログがあるとする。
前述の座標情報をもとに、ダイアログが表示される位置を指定することができる。

image_dialog.style.top = (image_domRect.top + 20) + 'px';
image_dialog.style.left = Math.abs(image_domRect.left - image_domRect.width - 100) + 'px';
$(image_dialog).show();