■備忘録　html座標位置取得

JavaScriptのgetBoundingClientRectメソッドを使用する方法

getBoundingClientRectメソッドは、HTML要素の座標位置を取得できるJavaScriptのメソッドです。

 <!-- HTMLコード -->
<div class="box-wrp">
      <div id="box" class="box1 box">BOX</div>
    </div>
    <script type="text/javascript" src="sample.js"></script>

// JavaScript
var rect = box.getBoundingClientRect();
console.log(rect);

▼出力結果▼

{x: 694.296875, y: 33, width: 92.703125, height: 86, top: 33, …}
bottom: 119
height: 86
left: 694.296875
right: 787
top: 33
width: 92.70312
5x: 694.296875
y: 33