javascript - 使用纯js为具有特定类的所有div设置高度

Question

嗨，我正在尝试做一些我认为在 javascript 中不应该那么难的事情，但我无法让它工作。我有许多带有 nav-img 类的 div，其宽度为 20%。我希望无论窗口大小如何，div 始终具有相同的宽高比。高度应为宽度/1.35。这是我尝试过的:

var vNavimg = document.getElementsByClassName("nav-img");
var vNavWidth = window.getComputedStyle(vNavimg).width;
window.onload = setHeight;

function setHeight() {
    vNavimg.style.height = vNavWidth/1.35+"px";
}

Answer 1

如此接近，该方法 getElementsByClassName() 返回以给定类作为参数的对象数组，您应该循环遍历它们并分配新的高度:

var vNavimg = document.getElementsByClassName("nav-img");

for(var i=0;i<vNavimg.length;i++){
    vNavimg[i].style.height = vNavWidth/1.35+"px";
}

或者使用函数setHeight():

var vNavimg = document.getElementsByClassName("nav-img");

for(var i=0;i<vNavimg.length;i++){
    setHeight(vNavimg[i]);
}

function setHeight(div) {
    div.style.height = vNavWidth/1.35+"px";
}

希望这有帮助。