ResizeObserverEntry
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
ResizeObserverEntry
接口是传递给ResizeObserver()
构造器回调函数中的参数对象。
属性
ResizeObserverEntry.contentRect
(en-US) Experimental 只读- 对改变尺寸大小的元素的
DOMRectReadOnly
引用(包含 x,y,width,height,top,right,bottom,left 属性)。 ResizeObserverEntry.target
(en-US) Experimental 只读- 当前改变尺寸大小的元素的
Element
引用
事件
无
方法
无。
示例
以下示例通过观察 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 | Status | Comment |
---|---|---|
Resize Observer ResizeObserverEntry |
Editor's Draft | Initial definition. |
浏览器兼容性
BCD tables only load in the browser