使用纯 js 将高度设置为具有特定 class 的所有 div

Question

嗨，我正在尝试做一些我认为在 javascript 中不应该那么难的事情，但我无法让它工作。我有许多 div 和 class nav-img，宽度为 20%。我希望 div 始终具有相同的纵横比，无论 window 的大小如何。高度应为 width/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() return 以给定 class 作为参数的对象数组，你应该循环通过它们并分配新的高度：

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";
}

希望对您有所帮助。

使用纯 js 将高度设置为具有特定 class 的所有 div

Set height to all divs with a specific class using pure js

javascript

height

class