原型JS-计算剩余宽度

Prototype JS - Calculate remaining width

本文关键字:余宽度 计算 JS- 原型      更新时间:2023-09-26

对于类似的div

<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或Prototype JS计算最后一个span元素右侧的剩余空间。Span元素有一个动态宽度,我必须找出div最后一行右边的剩余空白。

您可以尝试以下操作:

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样式(边界、填充等)的不同,它可能会变得更复杂。

这是我从父div开始的方法…

var t = $$('div span')[4];
var width = t.up().getWidth() - t.getWidth();

您可以根据自己的喜好修改$$()中的CSS选择器,但我是基于您提供的HTML。

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