Question

这个javascript行的vanilla js中的等效代码是什么？

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

这是我的尝试，但它似乎没有正常工作（似乎根本没有在所有3个元素上设置任何高度）：

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

您可以使用Window#innerHeight获取窗口的高度，使用Document#querySelectorAll选择目标。要迭代elementList返回的querySelectorAll，我们将使用NodeList#forEach（如果不支持将元素列表转换为数组 - 请参见下文），并在每个元素上设置高度： / p>

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

#wrapper {
  background: red;
}

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

如果您需要将元素列表转换为数组：

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

或

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

相当于在vanillajs中将html和body height设置为窗口高度

1 个答案: