ResizeObserver.ResizeObserver()
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
ResizeObserver
构造器创新一个新的 ResizeObserver
对象,用于接收 Element
内容区域的改变 或 SVGElement
的边界框改变改变。
语法
var ResizeObserver = new ResizeObserver(callback)
参数
- 回调函数
- The method called whenever a resize occurs. The method is called with an array of
ResizeObserverEntry
objects.
当尺寸发生变化时触发回调,使用ResizeObserverEntry
对象数组调用该方法。
示例
The following example shows the dimensions of a box inside it, as text, upon resizing.
下面示例展示了box调整大小时,其内部文本显示为尺寸大小。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const boxEl = entry.target;
const dimensions = entry.contentRect;
boxEl.textContent = `${dimensions.width} x ${dimensions.height}`;
}
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));
规范
Specification | Status | Comment |
---|---|---|
Resize Observer ResizeObserver |
Editor's Draft | Initial definition. |
浏览器兼容性
BCD tables only load in the browser