2015-02-06 64 views
1

我想知道是否有任何好方法检查两个html元素的文本是否重叠? Carification:检查元素之间的重叠是否问题我想检查2个元素重叠内的实际文本。jQuery/Javascript检查文本重叠

说我有

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

我怎么能请检查是否这些2种元素的文本重叠的要素是什么? 我们可以假设我有权访问给定元素的jQuery对象。

编辑: 我想说的是,我可以检测到元素截取的边界,但在文本的情况下,有可能每个字符上下的空间的很大一部分是“未使用的”。

+0

“检查元素之间的重叠是否问题我想检查2个元素内部的实际文本是否重叠”这个陈述并不完全清楚,这很混乱 – Leo 2015-02-06 08:50:00

+0

http://stackoverflow.com/questions/5419134/how-to -detect-if-two-divs-touch-with-jquery – Deshan 2015-02-06 08:52:01

回答

2
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; 
} 
+1

getBoundingClientRect返回整个元素的矩形,而不是其中的文本。 – 2015-02-06 08:52:07

+0

我同意您的使用Element.getClientRects() – isxaker 2015-02-06 08:55:27

+0

的提议谢谢;)如果您同意,我该如何投票答复? – 2015-02-06 10:31:51

1

可以使用Element.getClientRects()方法,它返回一个指示在客户端的每个盒子的边界矩形矩形的集合做到这一点。

返回的值是ClientRect对象的集合,每个与该元素关联的CSS边框都有一个对象。每个ClientRect对象都包含只读的左侧,顶部,右侧和底部属性,以像素为单位,左上角相对于视口的左上角。对于带字幕的表格,即使字幕位于表格的边框外,也会包含字幕。