javascript 座標を指定して要素を取得する

javascript 座標を指定して要素を取得する

javascriptで、elementFromPointを使用して、座標を指定して要素を取得するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

elementFromPoint使い方

elementFromPointを使用すると、座標を指定して要素を取得することが可能です。

elementFromPoin使い方

実行結果をみると、指定した要素が拡大されていることが確認できます。

macのsafari(13.1.3)でも同じ結果となります。

また、document.getElementByIdの省略と関数をアロー化して、簡潔に記述することもできます。

サンプルコード

以下は、
「要素」をクリックすると座標を取得して、取得した座標から要素を生成して、x,y座標を表示する
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

座標が取得できていることが確認できます。