Size menu items based on how many there are in JS
I need to have a menu that has items that size themselves based on how many there are. Say, ther开发者_Go百科e are three items. Each one would have about 33% width of the container. But if there were were ten, each would have 10%. Does anyone have any ideas/suggestions? Thanks!
Usually menu is built from unordered list and parent menu element have id="menu" In this case you'll need code like next:
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 + "%";
}
精彩评论