DIV监听 size 变化

邱秋 • 2023年11月15日 • 阅读:73 • javascript html5

resize 事件通常用于监听窗口大小的变化,而不是 div 元素的大小变化。不过,你可以使用 ResizeObserver API 来监听 div 元素的大小变化。下面是一个简单的示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resize Observer Example</title>
  <style>
    #resizeDiv {
      width: 300px;
      height: 200px;
      background-color: lightblue;
      resize: both;
      overflow: auto;
    }
  </style>
</head>
<body>

<div id="resizeDiv"></div>

<script>
  const resizeDiv = document.getElementById('resizeDiv');

  const resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      const { width, height } = entry.contentRect;
      console.log(`Width: ${width}, Height: ${height}`);
    }
  });

  resizeObserver.observe(resizeDiv);
</script>

</body>
</html>

在这个例子中,我们创建了一个可调整大小的 div 元素,并使用 ResizeObserver 监听其大小变化。当 div 的大小发生变化时,触发回调函数并打印出新的宽度和高度。

我们在绘制ECharts图表时 , 如果您的图表容器的父级元素的宽高发生变化,而不是整个窗口大小变化,您仍然可以使用 resize 方法来手动触发图表的适应性调整。这可以通过监控父级元素的大小变化来实现。

以下是一个示例,展示如何在父级元素大小变化时手动调整 ECharts 图表的大小:

// 获取图表容器的父级元素
var chartContainerParent = document.getElementById('parentOfYourChartContainer');

// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('yourChartContainer'));

// 设置图表配置
var option = {
    // 图表配置项
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

// 监听父级元素大小变化事件
var resizeObserver = new ResizeObserver(function () {
    // 调用 resize 方法,使图表自动适应新的容器尺寸
    myChart.resize();
});

// 监听 chartContainerParent 元素的大小变化
resizeObserver.observe(chartContainerParent);

在上述代码中,我们使用了 ResizeObserver 对象来监测父级元素的大小变化。在大小变化时,resizeObserver 会触发回调函数,该回调函数中调用了 myChart.resize() 方法,从而使图表适应新的容器尺寸。

确保将 'yourChartContainer' 替换为实际的 ECharts 图表容器的 ID,以及 'parentOfYourChartContainer' 替换为图表容器的父级元素的 ID。这样,即使窗口大小没有变化,只有父级容器的大小变化,图表仍会相应地进行调整。

我,秦始皇,打钱!