在Javascript中測量文本節點的邊界框

我無法獲取使用Javascript的文本節點的大小（以像素爲單位）。例如：在Javascript中測量文本節點的邊界框

 
<p> 
    first text block 
    <b>second text block</b> 
</p>

我需要獨立地獲取兩個文本塊的邊界框。我可以通過測量< b>元素來獲得第二個塊的大小，但第一個塊沒有。據我所知，似乎Javascript中的textnode沒有高度或寬度。

將第一個文本塊包裝到< span>中，並且測量這不是一個選項，因爲我發現跨度不一定會繼承其上的所有樣式，並且當我包裝文本時它會突然變化尺寸。這就像Javascript的海森堡不確定性原理一樣;我測量某件事物的嘗試改變了它。

我正在構建一個將HTML分成頁面（實際上是EPUB HTML）的應用程序，並且我需要知道頁面上每個文本塊的位置，高度和寬度，以便我可以知道是否要放置它在此頁面或下一頁上。

有什麼建議嗎？

來源

2011-08-05 ccleve

有確實出現了一個答案。我們採取了完全不同的方法來解決這個問題。我們正在使用多列布局來分解EPUB中的頁面。不需要文字指標。 – ccleve

我錯了。 Tim Down已經回答了。 – ccleve

您可以使用支持CSSOM View extensions，這是最新的瀏覽器中Range（火狐4+，自2009年初以來的WebKit，歌劇11，也許更早），並在IE TextRange做到這一點。 TextRange代碼很乏味，所以我在這裏省略了它。

的jsfiddle：http://jsfiddle.net/gdn6C/1/

代碼：

function getTextNodeHeight(textNode) { 
    var height = 0; 
    if (document.createRange) { 
     var range = document.createRange(); 
     range.selectNodeContents(textNode); 
     if (range.getBoundingClientRect) { 
      var rect = range.getBoundingClientRect(); 
      if (rect) { 
       height = rect.bottom - rect.top; 
      } 
     } 
    } 
    return height; 
}

來源

2011-08-06 11:52:04

哇！非常感謝！ –

爲什麼你需要打開IE的特殊情況？ http://www.quirksmode.org/dom/w3c_cssom.html中的表格表明'getBoundingClientRect'在這裏也可用。 –

@NicoSchlömer：該頁面引用元素的getBoundingClientRect方法，而不是範圍。 –

嘗試製作要內嵌測量的元素。內聯元素只佔用盡可能多的空間。因此，它具有可以通過javascript檢索的絕對寬度和高度。塊元素填充包含元素的整個寬度。因此，JavaScript無法訪問其寬度。

來源

2011-08-05 18:42:10

默認情況下是不是內聯標籤？跨度不起作用，參見上文。 – ccleve

在Javascript中測量文本節點的邊界框

回答

相關問題