原型JS - 計算剩餘寬度

對於一個div像這樣原型JS - 計算剩餘寬度

<div style="width:200px;"> 
    <span>Element 1</span> 
    <span>Element 2</span> 
    <span>Element 3</span> 
    <span>Element 4</span> 
    <span>Element 5</span> 
</div>

我怎樣才能在最後跨度元素的右邊JavaScript或原型JS剩餘空間計算。 Span元素具有動態寬度，我將不得不從右邊的最後一行中找出剩餘的空白空間。

來源

2013-02-06 morandi3

...你爲什麼還在使用Prototype？ – ceejayoz

這是一個使用Prototype的舊網站。無論如何，純JavaScript將會很好。 – morandi3

引用用戶提出問題abrout PrototypeJS to jQuery沒有幫助，可能會導致另一個holywar –

這是我會做它從父DIV開始的方式......

var t = $$('div span')[4]; 

var width = t.up().getWidth() - t.getWidth();

您可以修改$$() CSS選擇根據自己的喜好，但我使其基於您提供的HTML。

http://api.prototypejs.org/dom/Element/prototype/getWidth/

來源

2013-02-07 00:12:17

在同一行中可能會多於一個span元素，這將適用於每行一個span。 – morandi3

如果你將整行放在一個''中，那麼你可以計算出該元素的寬度而不是所有跨度 –

您可以嘗試類似如下的內容：

var div = $("divId"); // Get the extended div element 
var width = div.measure("width"); 
var offset = div.cumulativeOffset(); 

var span = document.createElement("span"); 
div.appendChild(span); // Append an empty span at the end of the last line 
var spanOffset = span.cumulativeOffset(); 

var emptySpace = (width - (spanOffset.left - offset.left)) % width; 
span.remove();

可能變得更加複雜一些，具體取決於div樣式（邊框，填充等）

來源

2013-02-07 18:02:09 yethie

我會試試這個 – morandi3

原型JS - 計算剩餘寬度

回答

相關問題