jQuery/Javascript检查文本重叠

jQuery/Javascript Check for text-Overlap

本文关键字：文本 重叠 检查 Javascript jQuery      更新时间：2023-09-26

我想知道是否有什么好方法可以检查两个html元素的文本是否重叠？Carifization：检查元素之间的重叠是没有问题的。我想检查2个元素内的实际文本是否重叠。

假设我有元素

<span id="green">Green is my cÔlor</span>
<span id="blue">blue is my color</span>

我如何检查这两个元素的文本是否重叠？我们可以假设我可以访问给定元素的jQuery对象。

编辑：我想说的是，我可以检测元素的边界是否相互作用，但在文本的情况下，每个字符上方和下方的大部分空间可能"未使用"。

function getPositions(elem) {
    var clientRect = elem.getBoundingClientRect();
    return [
        [ clientRect.left, clientRect.left + clientRect.width ],
        [ clientRect.top, clientRect.top + clientRect.height ]
    ];
}

function intersect(elemA, elemB) {
    var posA = getPositions(elemA),
        posB = getPositions(elemB),
        isOverlap = false;
    if (posA[0][0] < posB[0][1] && posA[0][1] > posB[0][0] &&
        posA[1][0] < posB[1][1] && posA[1][1] > posB[1][0])
        isOverlap = true;
    return isOverlap;
}

您可以使用Element.getClientRects（）方法来完成此操作，该方法返回一组矩形，这些矩形指示客户端中每个框的边界矩形。

返回的值是ClientRect对象的集合，与元素相关联的每个CSS边框都有一个对象。每个ClientRect对象都包含描述边框的只读左、上、右和下属性，以像素为单位，左上角相对于视口的左上角。对于带有标题的表，即使标题在表的边框框之外，也会包含该标题。

相关文章：