指定した座標上に何の要素があるかを取得する

JavaScriptで指定した座標上に何の要素があるかを取得するプログラムを組みたいのですがわからず質問させていただきます。

今回実現したいことはelementFormPointの様にウィンドウの左上から座標を指定するのではなく
ある要素を基準としてその上に何の要素があるのかを取得したいです。

例としては

HTML
1<div class="div1">
2    <p>あいうえお</p>
3    <p>かきくけこ</p>
4    <p>さしすせそ</p>
5</div>

というHTMLソースがあったとして
pの１つ目の(top:left)が(100px:0)、２つ目が(200px:0)、３つ目が(300px:0)だとして
div1の左上を(0:0)とし、(100px:0)をしていしてpの一つ目を取得するようなコードがあれば教えていただきたいです。

調べてもelementFormPointくらいしか出てこず詰まっていたのでご教授をお願いします。

yambejp

2021/10/19 05:56

所定のポイントに存在するすべてのHTMLを拾えばよろしいのでは？

行動規範の内容に同意します

回答1件

やはり elementFormPoint() を使うのがもっとも簡単だと思います。

基準となる要素を変えたいのなら、そうなるように座標をずらせばよいのです。elementFromPoint()に渡すのは、<div>のgetBoundingClientRect()のtopとleftにwindow.scrollXとwindodow.scrollYをそれぞれ足した値にさらに相対座標 (100px:0) を足したものです。

投稿2021/10/19 05:42