javascript - 纯JavaScript:将onload和onresize合并在一个函数中？

有点卡在这里。

我正在尝试显示和输出内部页面的实时（响应）高度和宽度。

在这段代码中，我感觉自己在重复很多事情。无论如何，有没有使代码看起来更整洁或将其放在一个函数中的方法？

就个人而言，在这种情况下，我不想使用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>

最佳答案

在这段代码中，我感觉自己在重复很多事情。无论如何，有没有使代码看起来更整洁或将其放在一个函数中的方法？


是的，您重复太多了。一次设置所有功能（或将它们分成几行-编码器选择），无论哪种方式，都将它们设置为相同的功能。

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>