javascript getElementsByClassName("foo"||"bar

javascript getElementsByClassName("foo"||"bar")

本文关键字：quot bar foo getElementsByClassName javascript      更新时间：2023-10-23

基本上，我想要一段javascript，将浏览器窗口的高度添加到类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 equival一样将它浓缩为一个for(){...}。

function fullsizes(){
    $(".fullheight,.fullscreen").each(function(){
      $(this).height($(window).height())
    })
}

您可以使用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";
    }
}

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

style.css:

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

你可以像萨帕尔说的那样使用document.querySelectorAll。

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

querySelector

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

querySelectorAll

返回一个NodeList，其中包含节点子树中所有匹配的Element节点，如果未找到匹配项，则返回一个空NodeList。

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

您可以使用concat方法合并数组

var c = a.concat(b)

然后您可以迭代c。

相关文章：