Question

我有一些js代码根据窗口大小调整div id的大小

function resize()
    {
        var heights = window.innerHeight;
        document.getElementById("somediv").style.height = heights + "px";
    }
    resize();
    window.onresize = function() {
        resize();
    };

这很棒，但是我希望它能够调整同一个类的几个div。我尝试使用getElementByClass但是没有用。

Answer 1

假设<div>有somediv班，您可以执行以下操作

function resize()
 {
    var heights = window.innerHeight;
    var divs = document.getElementsByClassName("somediv");
    for(var i=0;i<divs.length;i++)
       divs[i].style.height = heights + "px";
 }
resize();
window.onresize = resize;

Answer 2

使用jQuery非常简单：

function resize()
    {
        var heights = window.innerHeight;
        $('.common-class').css('height',heights + 'px');
    }

但是如果你想使用纯JavaScript，那么你需要使用循环：

var cmn = document.getElementsByClassName('common-class');
for(var i = 0; i < cmn.length; i++) {
    cmn[i].style.height = heights + "px";
}

Answer 3

getElementsByClassName()[1]，如：

...
var heights = window.innerHeight;
var divEle = document.getElementsByClassName("some_class");
for(var i = 0; len = divEle.length; i < len; i++) {
    divEle[i].style.height = heights + "px";
}
...

Answer 4

如果您有多个具有相同ID的元素，则您的HTML无效。

您应该使用Document.getElementsByName（）

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName

Answer 5

由于所有答案都使用getElementsByClassName，我添加querySelectorAll可能是更好的解决方案：

var elements = document.querySelectorAll('div.somediv');

它更适应未来的变化
善于学习CSS选择器

使用javascript调整特定类的所有div

5 个答案: