ResizeObserver.observe()
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
The observe() method of the ResizeObserver interface initiates observing of a specified Element or SVGElement.
ResizeObserver 接口的 **observe() **方法用于观察一个指定Element 或 SVGElement。
语法
resizeObserver.observe(target);
参数
- target
-
被观察的
Element或SVGElement引用。 - options 可选
-
一个指定观察设置的可选参数对象。目前只有一个可设置的选项：
box-
设置观察者将以哪种盒子模型来观察变动。可以设置的值为
content-box(默认值)，border-box，和device-pixel-content-box。
返回值
异常
无
示例
以下示例通过观察 box 的尺寸变化从而改变其边框圆角半径。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
}
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));
规范
| Specification |
|---|
| Unknown specification # dom-resizeobserver-observe |
浏览器兼容性
BCD tables only load in the browser