Question

看一下这个例子：https://jsfiddle.net/vxun2Lgg/2/

我附上了＆＃34; resize＆＃34; container div上的事件监听器。打开开发工具并修改container的宽度后，不会调用调整大小的回调。我错过了什么？

PS：我对窗口调整大小事件不感兴趣，只在container div。

中

HTML：

<div class="container"></div>

JS：

var container = document.getElementsByClassName("container")[0];
container.addEventListener("resize",function(){console.log("resizing")});

Answer 1

resize仅对window有效。 If supported您可以使用ResizeObserver。

new ResizeObserver(() => console.log("resizing")).observe(container);

否则，您可能需要使用setInterval进行轮询并检查大小。

Answer 2

此答案通过在纯 JavaScript 中提供一个可运行代码来扩展 accepted answer，您可以在代码段运行程序（底部的按钮）上进行尝试。我直接将解释保留在代码中。

信不信由你，你只需要一个 3 行函数（onresize 函数）来模拟 resize 事件。

享受吧！

// This function works like an Event Listener for
// resizing a dom element.
//
// The ResizeObserver calls the callback function
//   whenever the size of the dom_element changes
//   (because it's "observing" the dom_elem)
//
// Do this:
//
//    understand_it_first
//       .then(copy_it)
//       .then(use_it);
//
// THIS IS THE 3-LINE FUNCION YOU WANT TO USE :)
//
const onresize = (dom_elem, callback) => {
  const resizeObserver = new ResizeObserver(() => callback() );
  resizeObserver.observe(dom_elem);
};

// USING IT
//

// Using constants to make it easier to read the code
//
const bb = document.getElementById('bad_boss');
const be = document.getElementById('bad_employee');

// Finally, register the observer for the dom_elem
//
onresize(bb, function () {
  be.style.width  = bb.offsetWidth + 'px';
  be.style.height = bb.offsetHeight + 'px';
});

#bad_boss, #bad_employee{
  font-size        : 32px;
  height           : 200px;
  width            : 200px;
}
  
/* Colors that Talk*/

#bad_boss {
  background-color : #0badb055;
}
#bad_employee {
  background-color : #0b00c0de;
  color            : #0badc0de;
}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ResizeObserver - onresize Demo</title>
    </head>
    <body>
        <!-- Experiment to resize this <textarea> -->
        <textarea id="bad_boss">Always do whatever I say!</textarea>
        <div id="bad_employee">Always, Boss!</div>
    </body>
</html>

Answer 3

我认为你不能。

https://developer.mozilla.org/en-US/docs/Web/Events/resize

仍然可以设置onresize属性或使用addEventListener（）在任何元素上设置处理程序。但是，resize事件仅在窗口对象（document.defaultView）上触发（发送）。只有在窗口对象上注册的处理程序才会收到事件。

最终目标是什么？可能有另一种选择。

Answer 4

您可以在元素上使用getBoundingClientRect()。我已经包含了一个代码示例，它使用轮询来获取div元素的宽度并输出结果。

let demo = document.getElementById('demo');
let demoInfo = document.getElementById('demo-info');

setInterval(() => {
  let demoSize = demo.getBoundingClientRect();
  demoInfo.innerHTML = demoSize.width;
}, 500);

*{
  box-sizing: border-box;
}

#demo{
  display: flex;
  width:50%;
  
  background-color: red;
  
  padding: 50px;
}

<div id="demo">Demo Div Element</div>
<p id="demo-info"></p>

div上没有触发resize事件

4 个答案: