使用JavaScript预测元素宽度

Question

我想在页面上呈现选项卡元素。这些选项卡是内联块，因此如果单个行上的选项卡太多，其余选项卡将自动将自己包装到新行中。我不想要这个。我想要的是，如果选项卡太多，则在选项卡元素的末尾会显示一个箭头图标，这使得可以在选项卡组之间循环。

问题是，包含所有选项卡的容器元素的宽度可以动态更改，选项卡数量可以更改，并且每个选项卡的宽度也不同。

是否有可能创建一个JavaScript函数，告诉我如果这些选项卡在容器元素上呈现，那么它们中有多少可以放在单个行上？即使所有呈现的标签的宽度都是有用的。

我可以使用此函数来计算我可以在页面上呈现的选项卡数量，并将其余选项卡放在不同的组中。

Answer 1

也许这是你在找什么

carouFredSel插件

https://github.com/Codeinwp/carouFredSel-jQuery

演示 http://www.colemuseum.org/js/

Answer 2

貌似我可以插入容器的标签，让它们的大小和删除在下一个渲染事件发生之前，它们来自DOM。通过这种方法，我可以计算待渲染选项卡的大小以将其放入组中。

下面是一个简单的例子可以怎么做： https://jsfiddle.net/fqkx9krs/

HTML

<!-- Normally the tab list is generated with JSX, but in this simple example we just grab it from here--> 
<ul class="tabs-list hidden" id="tabs"> 
    <li>Tab 1</li> 
    <li>This is Tab 2</li> 
    <li>And this Tab 3</li> 
</ul> 


<br> 
<br> 
<br> 

<div class="tabs" id="container"></div> 

CSS

.tabs { 
    width: 200px; 
    background-color: grey; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    display: inline-block; 
    background-color: blue; 
    padding: 3px; 
    color: white; 
    border: 1px solid black; 
} 

.hidden { 
visibility: hidden; 
} 

JS

function predictElementSizes() { 
    var tabs = document.getElementById("tabs"); 
    var container = document.getElementById("container"); 

    container.appendChild(tabs); 

    var lis = tabs.childNodes; 

    lis.forEach(elem => { 
    if (elem.getBoundingClientRect) { 
     console.log(elem.getBoundingClientRect().width); 
    } 
    }); 

    tabs.parentNode.removeChild(tabs); 
} 

setTimeout(predictElementSizes, 1000);