san*_*han 3 html javascript css
看一下这个例子：https : //jsfiddle.net/vxun2Lgg/2/
我在containerdiv 上附加了“调整大小”事件监听器。打开开发工具并修改的宽度后container，不会调用resize回调。我想念什么？
PS：我对窗口调整大小事件不感兴趣，仅对containerdiv 感兴趣。
的HTML：
<div class="container"></div>
js：
var container = document.getElementsByClassName("container")[0];
container.addEventListener("resize",function(){console.log("resizing")});
Alm*_*pos 15
这个答案通过提供可运行的代码扩展了接受的答案，您可以在代码片段运行器（底部的按钮）上尝试该代码。我将解释直接保留在代码上。
不管你信不信，你只需要一个 3 行函数（onresize）来模拟调整大小事件。
好好享受！
// 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>resize仅对有效window。如果支持，可以使用ResizeObserver。
new ResizeObserver(() => console.log("resizing")).observe(container);
否则，您可能必须轮询使用setInterval并检查大小。