貌似我可以插入容器的標籤,讓它們的大小和刪除在下一個渲染事件發生之前,它們來自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);
這是否幫助你:http://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows? – Wold