# ResizeObserverAPI

Resize Observer API提供了代码监视DOM元素大小更改，并且DOM在每次大小更改时都会通知观察者(代码)的机制。

# 两个核心接口

ResizeObserver

提供注册新观察者以及启动和停止观察元素的能力。

ResizeObserverEntry

描述已调整大小的单个元素，标识该元素及其新的大小。

# 简单使用例子

<!DOCTYPE html>
<html lang="en">
<head>
	<title>ResizeObserverAPI</title>
	<style>
		#root{
			width: 100px;
			height: 120px;
			background-color: red;
			padding: 10px;
			border:5px solid #abc;
		}
		#root2{
			width: 50px;
			height: 60px;
			background-color: red;
			padding: 10px;
			border:5px solid #abc;
		}
	</style>
</head>
<body>
	<div id="root">1111</div>
	<div id="root2">222</div>

	<script type="text/javascript">
        // 1. 构造一个监视器
		const resizeObserver = new ResizeObserver(function(entries){
			console.log(entries); // entries 是所有被监视元素的列表 [ResizeObserverEntry...]
			for(let entry of entries){
				console.log(entry); // ResizeObserverEntry
                if(entry.borderBoxSize[0].blockSize > 200){
					entry.target.style.background = "blue";
				}
			}
		})
		resizeObserver.observe(document.getElementById("root")); // 监听#root元素
		resizeObserver.observe(document.getElementById("root2"));// 监听#root2元素
        
        // 改变下大小，试一试
        document.getElementById("root").onclick = function(){
			this.style.height = "300px"
		}
	</script>
</body>
</html>

# 属性与方法解释

# ResizeObserver

new一个size监视器的构造函数，返回一个ResizeObserver对象。

该对象有如下三个方法：

ResizeObserver.observe(element)

开始监视指定的元素。
ResizeObserver.unobserve(element)

结束监视指定的元素。
ResizeObserver.disconnect()

结束监视所有的监听。

# ResizeObserverEntry

被监听的每一个元素形成的ResizeObserverEntry对象。

该对象有如下四个属性：

ResizeObserverEntry.target

被监视元素的DOM引用
ResizeObserverEntry.contentRect

对改变尺寸大小的元素的 DOMRectReadOnly引用（包含x,y,width,height,top,right,bottom,left属性）。
ResizeObserverEntry.borderBoxSize

被监视元素的borderBox的大小。注意它是一个数组，形式为：[{blockSize:xxx,inlineSize:xxx}]
- blockSize：高度
- inlineSize：宽度
ResizeObserverEntry.contentBoxSize

被监视元素的contentBox的大小。注意它是一个数组，形式为：[{blockSize:xxx,inlineSize:xxx}]
- blockSize：高度
- inlineSize：宽度

← Set和Map数据结构