Entspricht der Einstellung von html und Körpergröße zu Fensterhöhe in vanillajs

Question

Was ist der entsprechende Code in Vanille js zu dieser Zeile von Javascript?

$('html, body, #wrapper').height($(window).height()); 

Das ist mein Versuch war, aber es scheint nicht richtig zu funktionieren (es scheint gar nicht auf alle drei Elemente jede Höhe eingestellt):

var w=window,d=document, 
    e=d.documentElement, 
    g=d.getElementsByTagName("body")[0]; 
    x=w.innerWidth || e.clientWidth || g.clientWidth,y=w.innerHeight || e.clientHeight || g.clientHeight; 
    document.querySelector("html").clientHeight = g.clientHeight = document.getElementById("wrapper").clientHeight = y; 

Answer 1

Sie die Höhe bekommen Wählen Sie unter Verwendung von Window#innerHeight das Ziel unter Verwendung von Document#querySelectorAll aus. Um die elementList dass querySelectorAll kehrt laufen, werden wir verwenden NodeList#forEach (wenn nicht die Elementliste in ein Array unterstützt konvertieren - siehe unten), und stellen Sie die Höhe für jedes Element:

var height = window.innerHeight + 'px'; 
 

 
document.querySelectorAll('html, body, #wrapper').forEach(function(el) { 
 
    el.style.height = height; 
 
});

#wrapper { 
 
    background: red; 
 
}

<div id="wrapper"></div>

wenn Sie die die Elementliste in ein Array konvertieren:

[].slice.call(document.querySelectorAll('html, body, #wrapper'), 0) 

oder

Array.from(document.querySelectorAll('html, body, #wrapper'))