原型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 - 计算剩余宽度

回答

相关问题