2015-02-06 63 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對象都包含只讀的左側,頂部,右側和底部屬性,以像素爲單位,左上角相對於視口的左上角。對於帶字幕的表格,即使字幕位於表格的邊框外,也會包含字幕。