Javascript 在调整窗口大小时重新计算元素大小

如何正确使用

window.addEventListener（“resize”，（）=>{}）

在下面的情况下，我需要在每个窗口调整大小时重新计算

size

：

const viewportWidth = Math.max(
  document.documentElement.clientWidth,
  window.innerWidth || 0
)

const viewportHeight = Math.max(
  document.documentElement.clientHeight,
  window.innerHeight || 0
)

const elements = list(48, () => {
  const circle = document.createElement("span")
  const minSize = Math.round((viewportWidth + viewportHeight) / 72)
  const maxSize = Math.round((viewportWidth + viewportHeight) / 21)
  const size = random(minSize, maxSize)
  Object.assign(circle.style, {
    width: `${size}px`,
    height: `${size}px`
  })
  return circle
})

---

无论出于何种原因，我正在努力解决这个问题，我非常感谢您的帮助。

您只需将上述逻辑封装在事件侦听器的回调函数中即可

比如说,

class yourClass {
  constructor() {
    window.addEventListener("resize", () => {
      // logic to carry out recalculation
      elements();
    });
  }
  // the rest of your logic
}

---

这样做将确保每当在

窗口上触发
调整大小
事件时，将调用方法/函数。请尝试以下操作：


window.addEventListener（“调整大小”，（）=>{
const docHeight=Math.max（document.documentElement.clientHeight，window.innerHeight）；
document.getElementById（'documentHeight'）。innerHTML=docHeight；
});

在完整页面视图中打开此演示，并调整窗口大小以获得文档的内部高度。
你能发布一个完整的解决方案吗，因为我是一个不能让它工作的笨蛋？我道歉。谢谢。为什么需要将其包装在构造函数中？此构造函数的每个实例将添加相同的侦听器并执行相同的计算。您至少应该提供一种远程侦听器的方法。您可能应该取消调整大小事件的影响handler@customcommander你能举个例子来回答你会怎么做吗？你的问题还不清楚。您知道要侦听的事件以及如何将侦听器附加到该事件。“怎么了？”我补充道。希望它能按照您的期望工作。请看一看。您的问题是“在调整窗口大小时重新计算元素大小”。。右是的，
const size
基于
const minSize
和
const maxSize
的值应该在调整窗口大小时重新计算。