我想在页面上呈现选项卡元素。选项卡是行内 block ,所以如果一行中的选项卡太多,剩余的选项卡将自动换行。我不想要这个。我想要的是,如果选项卡太多,则在选项卡元素的末尾呈现一个箭头图标,这使得可以在选项卡组之间循环。
问题在于包含所有选项卡的容器元素的宽度可以动态变化,选项卡的数量可以更改,而且每个选项卡的宽度也不同。
是否可以创建一个 JavaScript 函数来告诉我,如果这些选项卡呈现在容器元素上,那么它们中有多少可以放在一行中?甚至所有呈现的选项卡的宽度也会很有用。
我可以使用这个函数来计算我可以在页面上呈现的选项卡数量,并将剩余的选项卡放在不同的组中。
最佳答案
看起来我可以在容器中插入选项卡,获取它们的大小并在下一个渲染事件发生之前将它们从 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);
关于javascript - 使用 JavaScript 预测元素宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40618893/