javascript - 纯 JavaScript : Combine onload and onresize in one function?

Question

这里有点卡住了。

我正在尝试显示和输出内页的实时(响应式)高度和宽度。

在这段代码中，我觉得我重复了很多事情。有没有办法让代码看起来更干净或者将其放在一个函数中？

就我个人而言，我不想在这种情况下使用 JQuery。

var pageSize = document.getElementById("innerSize");

window.onload = function() {
  var w = document.documentElement.clientWidth;
  var h = document.documentElement.clientHeight;

  pageSize.innerHTML = "Width: " + w + "<br>" + " Height: " + h;
}

window.onresize = function() {
  var w = document.documentElement.clientWidth;
  var h = document.documentElement.clientHeight;

  pageSize.innerHTML = "Width: " + w + "<br>" + " Height: " + h;
}

<div id="innerSize"></div>

Answer 1

In this code, I feel like I am repeating myself to much. Is there anyway to make the code look cleaner or put it in one function?

是的，你重复太多了。一次性设置相同的函数(或者将它们分成单独的行——编码器的选择)，无论哪种方式，将它们设置为相同的函数。

var pageSize = document.getElementById("innerSize");

window.onload = window.onresize = setWidth;

function setWidth() {
  var w = document.documentElement.clientWidth;
  var h = document.documentElement.clientHeight;

  pageSize.innerHTML = "Width: " + w + "<br>" + " Height: " + h;
}

<div id="innerSize"></div>