如何使用原型

我使用cumulativeOffset（）和getDimensions（）來計算邊界框的元素，但剛剛意識到cumulativeOffset返回的左上角的開始的元素。意思是：如果一個內聯元素換行，並且下一行比起始點更靠左，我會得到一個位移框。如何使用原型

經過研究，我發現我可以使用getClientRects（）來獲得所有rects。然後我可以通過，然後把左邊最左邊的矩形左邊的位置。

我想知道是否有更好的方法做到這一點......我只是沒有找到一個boundingBox（）原型函數。我忽略了它嗎？

編輯：我也剛剛發現getClientRects（）並不是所有的瀏覽器都支持，所以這不是解決方案。

來源

2009-10-31 enyo

我也沒有看到一個boundingBox（）函數，但我想知道是否使用相同的技術（和getDimensions()）通過父代：getOffsetParent()會做你想做的。 getOffSetParent()：

「返回元素的位置最靠近祖先如果沒有找到，則返回身體元素。」

哪一個應該考慮換行的地方，其中第二行是進一步離開的。

來源

2009-10-31 17:22:31 artlung

那麼，如果我有一個div，並且內部有多個跨度，並且只是第二行的最後一個跨度包裝，因此會變成兩個班輪（並創建第三行），父級信息不會幫助我，它？ – enyo 2009-11-07 17:15:32

也許我不理解這個問題。看起來好像，如果內聯跨度在**父**內，那麼即使「跨度」結束了奇數大小，父母邊界仍保持搖擺。你有一個網址，包含你正在使用的HTML和CSS嗎？ – artlung 2009-11-07 17:23:18

這裏是我嘗試演示問題的鏈接： http://test.opentip.org/inlineSpanProblem。實際上，我的主要目標是獲得任何元素的右邊框。我沒有看到任何其他方式比獲得左側位置和添加寬度。 – enyo 2009-11-08 21:03:32

我從來沒有聽說過這樣做的方法。您可以將它設置爲position：relative，將1x1絕對定位的div放入它，將其正確定位：0，獲取該div的LEFT + WIDTH，並從該值中減去原始嵌入式項目的偏移寬度。

這樣說，總的來說，也許你需要重新思考你想做這件事的原因！

來源

2010-01-20 22:19:19 dfitzhenry

恩，這實際上是個不錯的主意！我會測試它，並會盡快回來。 – enyo 2010-01-21 12:12:39

由dfitzhenry給出的解決方案似乎不適用於多行內聯元素的情況。這裏是我的JavaScript的解決方案：讓你的內聯元素nextSibling，檢查它是否是一個內聯元素，否則，創建一個新的行內元素，將其添加到您的內聯元素的父，然後獲取其offsetLeft：

var parentContainer = inline_elm.parentNode; 
var nextsib = inline_elm.nextSibling; 
var remove_next_sibling = false; 
if(!nextsib || nextsib.clientWidth != 0){ 
    remove_next_sibling = true; 
    var temp= document.createElement('span'); 
    parentContainer.insertBefore(temp, nextsib); 
    nextsib = temp; 
} 

var inline_bounding_right = nextsib.offsetLeft; 
if(remove_next_sibling) parentContainer.removeChild(nextsib);

來源

2010-10-14 13:03:50

這是一箇舊帖子，但是現在獲得邊界框的標準方法是getBoundingClientRect()，它在所有主流瀏覽器中都受支持，並且自2009年以來在大多數瀏覽器中都有at least partial support。請享用！

P.S. getClientRects()對於獲取包裝文本的單個邊界框也非常有用。它似乎與getBoundingClientRect()具有相同的瀏覽器支持，因爲它依賴於另一個，並且this source表明它得到很好的支持。

來源

2017-05-02 00:31:15

如何使用原型

回答

相關問題