jQuery/Javascript检查文本重叠

jQuery/Javascript检查文本重叠,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想知道是否有什么好方法可以检查两个html元素的文本是否重叠? 龋齿:检查元素之间的重叠没有问题,我想检查两个元素内的实际文本是否重叠 假设我有这些元素 <span id="green">Green is my cÔlor</span> <span id="blue">blue is my color</span> 绿色是我的颜色 蓝色是我的颜色 我如何检查这两个元素的文本是否重叠? 我们可以假设我可以访问给定元素的jQuery对象 编辑:

我想知道是否有什么好方法可以检查两个html元素的文本是否重叠?
龋齿:检查元素之间的重叠没有问题,我想检查两个元素内的实际文本是否重叠

假设我有这些元素

<span id="green">Green is my cÔlor</span>
<span id="blue">blue is my color</span>
绿色是我的颜色
蓝色是我的颜色
我如何检查这两个元素的文本是否重叠? 我们可以假设我可以访问给定元素的jQuery对象

编辑: 我想说的是,我可以检测元素之间的边界,但在文本中,每个字符上下的大部分空间可能是“未使用的”。

函数getPositions(elem){
var clientRect=elem.getBoundingClientRect();
返回[
[clientRect.left,clientRect.left+clientRect.width],
[clientRect.top,clientRect.top+clientRect.height]
];
}
函数相交(elemA,elemB){
var posA=获取位置(elemA),
posB=获取位置(elemB),
isOverlap=假;
if(posA[0][0]posB[0][0]&&
posA[1][0]posB[1][0])
isOverlap=真;
返回等重叠;
}
函数获取位置(elem){
var clientRect=elem.getBoundingClientRect();
返回[
[clientRect.left,clientRect.left+clientRect.width],
[clientRect.top,clientRect.top+clientRect.height]
];
}
函数相交(elemA,elemB){
var posA=获取位置(elemA),
posB=获取位置(elemB),
isOverlap=假;
if(posA[0][0]posB[0][0]&&
posA[1][0]posB[1][0])
isOverlap=真;
返回等重叠;
}
您可以使用返回矩形集合的方法来执行此操作,该矩形集合指示客户端中每个框的边界矩形

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

您可以使用返回矩形集合的方法来执行此操作,该矩形集合指示客户端中每个框的边界矩形


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

“检查元素之间的重叠没有问题,我想检查两个元素内的实际文本是否重叠”这句话并不完全清楚,令人困惑“检查元素之间的重叠没有问题,我想检查两个元素内的实际文本是否重叠”此语句不完全清楚,它会混淆GetBoundingClientRect返回整个元素的矩形,而不是其中的文本。我同意您使用element.getClientRects()的提议谢谢;)如果您同意我的答案,那么投票表决如何?getBoundingClientRect返回整个元素的矩形,而不是其中的文本。我同意您使用元素的提议。getClientRects()谢谢;)如果您同意我的答案,那么投票表决如何?
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;
}