根据 JS 中的数量调整菜单项的大小

Question

我需要一个菜单​​，其中的项目根据项目数量自行调整大小。比如说，有三项。每个宽度大约为容器的 33%。但如果有十个人，每个人都有 10%。有人有什么想法/建议吗？谢谢！

Answer 1

通常菜单是从无序列表构建的，父菜单元素的 id="menu"
在这种情况下，您将需要如下代码：

menuElt = document.getElementById('menu');
childElements = menuElt.getElementsByTagName("li");
var quantity = childElements.length;
var widthPercent = Math.round(100/quantity);
for (var i = 0; i < quantity; i++) {
  childElements[i].style.width = widthPercent + "%";
}