addEventListener（'resize'不适用于具有相对大小的div

Question

我正在尝试为具有相对大小的div设置调整大小的侦听器。 div具有height: 100%样式，我希望当div的像素高度随其父容器变化而触发该事件。 这是我的基本代码：

index.html

<html>
  <body>
<div class="foo"></foo>
  </body>
</html>

main.css

.foo {
  background-color: blue;
  height: 100%;
    width: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}

main.js

document.querySelector(".foo").addEventListener("resize", () => {
  console.log("foo resize");
});

window.addEventListener("resize", () => {
  console.log("window resize");
});

调整窗口大小时，会在控制台中获得预期的“窗口调整大小”文本，但从不打印“ foo调整大小”。 我还需要做其他事情才能使foo调整大小处理程序启动吗？

Answer 1

resize事件仅在window对象上触发。 正在制作ResizeObserver ，可以观察任意元素的大小，但是浏览器对它的支持仍然很匮乏。 但是，有一些polyfill可以模仿其行为，例如NPM上的resize-observer-polyfill 。

addEventListener（'resize'不适用于具有相对大小的div

问题描述

index.html

main.css

main.js

1 个解决方案

解决方案1
1 2019-04-29 22:17:09

addEventListener（&#39;resize&#39;不适用于具有相对大小的div

问题描述

index.html

main.css

main.js

1 个解决方案

解决方案1 1 2019-04-29 22:17:09

addEventListener（'resize'不适用于具有相对大小的div

解决方案1
1 2019-04-29 22:17:09