JavaScript ResizeObserver 接口

ResizeObserver 接口用于提供监测元素尺寸变化的机制。每当变化发生时，变化的通知都会传递给观察者。

传统的监测方法往往是通过一段时间间隔来检查尺寸变化，这对性能造成了很大影响。ResizeObserver 接口解决了这些问题，并且提供了更多的控制权来确定变化。

使用 ResizeObserver

首先，需要使用 ResizeObserver() 构造函数来创建一个 ResizeObserver 对象。该构造函数有一个回调参数，可以用于指定在观测到尺寸变化时要调用的函数。

回调参数有两个参数：

entries 参数包含 ResizeObserverEntry 对象，可以用于访问每次变化后元素的新尺寸。
observer 参数是观察者自身的引用。

语法:

let resizeObserver = new ResizeObserver((entries) => { 
  for (entry of entries) { 
      // access the entry properties 
  } 
});

ResizeObserver.observe()方法用于开始观察所需元素的变化。要监视的元素作为参数传递给该方法。

示例1： 在观察到变化时获取元素的高度和宽度。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Resize Observer API</title> 
    <style>
        #box { 
            resize: both; 
            border: solid; 
            background-color: green; 
            height: 100px; 
            width: 300px; 
            overflow: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
      GeeksForGeeks 
  </h1> 
    <b>Resize Observer API</b> 
    <p>Check the console to know the  
      current dimensions of the div.</p> 
    <div id="box">GeeksForGeeks</div> 
  
    <script> 
        boxElem = document.querySelector('#box') 
  
        let resizeObserver = new ResizeObserver((entries) => { 
            for (entry of entries) { 
  
                // get the height and width of the element 
                console.log('Height: ', entry.contentRect.height); 
                console.log('Width:', entry.contentRect.width); 
            } 
        }); 
  
        // observe the given element for changes 
        resizeObserver.observe(boxElem); 
    </script> 
</body> 
  
</html>

输出：

调整元素大小前：

JavaScript ResizeObserver 接口

调整元素大小后：

JavaScript ResizeObserver 接口

示例2： 根据高度改变元素的文本大小

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Resize Observer API</title> 
    <style>
      #box { 
        resize: both; 
        border: solid; 
        background-color: green; 
        height: 100px; 
        width: 300px; 
        overflow: auto; 
      } 
    </style> 
  </head> 
  
  <body> 
    <h1 style="color: green">GeeksForGeeks</h1> 
    <b>Resize Observer API</b> 
    <p>Check the console to know the 
      current dimensions of the div.</p> 
    <div id="box">GeeksForGeeks</div> 
  
    <script> 
      boxElem = document.querySelector("#box"); 
  
      let resizeObserver = new ResizeObserver(entries => { 
        for (entry of entries) { 
          boxElem.style.fontSize =  
            entry.contentRect.height + 'px'; 
        } 
      }); 
  
      resizeObserver.observe(boxElem); 
    </script> 
  </body> 
</html>

输出：