javascriptでdomの正確な位置を取得したい
javascriptでdomの位置を取得するための関数を作成してみました。domの位置として画面上の左上の位置を基準とした座標とdocument上の左上の位置を基準(スクロールを含めたもの)とした座標があると思いますが、その両方を求めれるようにしたいと思います。
画面の左上の位置からの座標を取得
画面の左上の位置からの座標を取得は以下の関数になります。frameタグ内のdomの場合getBoundingClientRectは画面内の見えている位置の左上が基準となるので、画面の左上を基準とする場合はownerDocument.defaultView.frameElementとすることでdomが所属するframeの見えている位置を取得できるのでdocument内の位置と足し合わして画面の左上の位置からの座標を取得できます。
/** * 画面の左上の位置からの座標を取得 */ function getTargetViewPosition(target) { const rect = target.getBoundingClientRect(); const frameRect = target.ownerDocument.defaultView.frameElement ? target.ownerDocument.defaultView.frameElement.getBoundingClientRect() : {top:0, left:0}; const [top, left] = [rect.top + frameRect.top, rect.left + frameRect.left]; return [top, left, rect.width, rect.height]; }
ドキュメントの左上の位置からの座標を取得
ドキュメントの左上の位置からの座標を取得する場合は以下になります。ここではdomのoffsetがdocument内の一番外側になるまで求めることでドキュメント内の座標を取得できます。
/** * ドキュメントの左上の位置からの座標を取得 */ function getTargetDocPosition(target) { const [top, left] = this.multiOffset(target); const rect = target.getBoundingClientRect(); return [top, left, rect.width, rect.height]; } function multiOffset(element) { var top = 0, left = 0; while (element) { top += element.offsetTop || 0; left += element.offsetLeft || 0; element = element.offsetParent; } return [top, left]; }