javascript getElementsByClassName（“foo”||“bar”）

Question

基本上我想要一个javascript片段，将浏览器窗口的高度添加到类<{1}}或fullscreen的

的任何元素

fullheight

这个（上面）工作得很好，我只是想知道是否有任何方法可以将它压缩成只有一个function fullsize(){ var a = document.getElementsByClassName("fullscreen"), b = document.getElementsByClassName("fullheight"); for (var i=0; i<a.length; i++){ a[i].style.height = window.innerHeight + "px"; } for (var j=0; j<b.length; j++){ b[j].style.height = window.innerHeight + "px"; } } window.addEventListener("load", fullsize), window.addEventListener("resize", fullsize); ，就像jQuery equiv。

for(){...}

Answer 1

您可以使用document.querySelectorAll

  

返回与指定的选择器组匹配的文档中的元素列表（使用文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

代码示例

document.querySelectorAll(".fullscreen, .fullheight"); 

将您的代码更改为

function fullsize(){
    var a = document.querySelectorAll(".fullscreen, .fullheight"); 
    for (var i=0; i<a.length; i++){
        a[i].style.height = window.innerHeight + "px";
    }
}

Answer 2

如果你真的必须使用javascript而不是写一些css

的style.css：

.fullscreen, .fullheight {
    height: 100vh;
}

你可以像使用Satpal那样使用document.querySelectorAll。

Answer 3

您可以使用querySelector() or querySelectorAll()执行此操作：

  

querySelector

     

返回节点子树中第一个匹配的Element节点。如果未找到匹配的节点，则返回null。

     

querySelectorAll

     

返回包含节点子树内所有匹配的Element节点的NodeList，如果没有找到匹配则返回空的NodeList。

您可能还会发现以下网站很有用;它包含了如何在不使用jQuery的情况下执行类似jQuery的事情的示例：http://youmightnotneedjquery.com/

Answer 4

您可以使用concat方法

合并数组

var c = a.concat(b)

然后你可以代替c迭代。