前言
最近在项目中遇到过这个一个问题，需要监听某个dom的width 或者 height变化，单这个dom的width height发生改变时候。某个dom的样式可能需要改变。
- 这个问题刚好可以使用 ResizeObserver 来实现完成
使用ResizeObserver
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ResizeObserver Example</title>
<style>
#resizeMe {
width: 200px;
height: 150px;
background-color: lightblue;
resize: both;
overflow: auto;
}
#changeStyle {
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="resizeMe">Resize me</div>
<div id="changeStyle">Change my style</div>
<script>
// 获取 DOM 元素
const resizeMe = document.getElementById('resizeMe');
const changeStyle = document.getElementById('changeStyle');
// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const { width, height } = entry.contentRect;
console.log(`Size: ${width}px x ${height}px`);
// 根据 resizeMe 的尺寸改变 changeStyle 的样式
changeStyle.style.width = `${width / 2}px`;
changeStyle.style.height = `${height / 2}px`;
}
});
// 观察 resizeMe 元素
resizeObserver.observe(resizeMe);
</script>
</body>
</html>
浏览器兼容性
ResizeObserver 是一个现代的 Web API，支持情况如下
- Chrome: 64+
- Edge: 79+
- Firefox: 69+
- Safari: 13.1+
- Opera: 51+
对于不支持 ResizeObserver 的浏览器，可以考虑使用 MutationObserver 或者第三方库（如 resize-observer-polyfill）作为替代方案
使用 resize-observer-polyfill
如果需要兼容较旧的浏览器，可以使用 resize-observer-polyfill
npm install resize-observer-polyfill
import ResizeObserver from 'resize-observer-polyfill';
// 剩下的代码和上面示例中的相同
