Question

我有两个元素，即画布和div，如下所示。我想知道如何找出div是否包含canvas元素（不是在DOM位置而是在位置方面）。

<canvas id="smallBall" style="position: relative; top: 52px; left: -89.0781px;"></canvas>
...
<div class="container">
<div id="hereIGo">The small ball is supposed to be contained in this DIV</div>
</div>

有没有办法可以使用jQuery实现这一目标？

Answer 1

一个选项是使用getBoundingClientRect()，它将检索页面上元素的确切位置，与任何位置亲属或绝对值无关。然后比较可能是：

// Both of these are the results of calling getBoundingClientRect() on their respective elements.
var canvas;
var div;

if (div.top >= canvas.top &&
    div.left >= canvas.top &&
    div.right <= canvas.right &&
    div.bottom <= canvas.bottom) {
       //the div is inside the canvas.
    }

您还有一个jQuery选项，它包含调用$(selector).offset()。这将返回一个对象，其界面与上述类似。此解决方案可以为您提供更多支持的图像。

比较身体中两个元素的位置

1 个答案: