Изменить код с jquery на javascript?

Question

[Anna Semenova]

определяет высоту вьюпорта и назначает классу в стиле высоту.
Ширина класса "окно" 100%

$(document).ready(function() {
  vph = $(window).height();
  $('.window').css('height', vph);
});

В случае если пользователь любит "подергать", ловим новую высоту и изменяем её у класса "окно"

$(window).resize(function() {
  vpw = $(window).width();
  vph = $(window).height();
  $('.window').css('height', vph);
});

На jquery все это легко сделать, а вот c javascript провалы.
Зачем изменять, если все работает? Что бы не тянуть библиотеку. Да с gzip меньше весит, но все же.
Так же на медленных соединениях будет дрыгаться окно

Answer 1

[riot26]

youmightnotneedjquery.com

Answer 2

[Денис]

Как-то так:

document.addEventListener('DOMContentLoaded', resizeElement, false);
window.addEventListener('resize', resizeElement, false);

function resizeElement() {
	var winH = window.innerHeight;
	[].forEach.call(document.querySelectorAll('.window'), function(el){
  	el.style.height = winH + 'px';
  });
}

Comments

[Anna Semenova]

Работает, а можно попросить с комментариями?

window.innerHeight; - Определяет высоту окна браузера или высоту вьюпорта?

Эти функции так же должны работать?
document.body.clientWidth //Ширина браузера
document.body.clientHeight //Высота браузера

[Денис]

Anna Semenova, document.body.clientHeight вернет высоту с учетом прокрутки, если она есть, а window.innerHeight - без учета.