Equivalent To Setting Html And Body Height To Window Height In Vanillajs

What is the equivalent code in vanilla js to this line of javascript? $('html, body, #wrapper').height($(window).height()); This was my attempt, but it doesn't seem to be working

Solution 1:

You can get the height of the window using Window#innerHeight, select the target using Document#querySelectorAll. To iterate the elementList that querySelectorAll returns, we'll use NodeList#forEach (if not supported convert the element list to an array - see below), and set the height on each element:

var height = window.innerHeight + 'px';

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

#wrapper {
  background: red;
}

<divid="wrapper"></div>

If you need to convert the the element list to an array:

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

or

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