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