上面的 div 元素可以拖曳右下角改变大小。该 div 能够实时、精准显示自身的高度和宽度尺寸，不论元素以何种方式改变尺寸。这得益于 JS 的 ResizeObserver API接口，它可以监视元素的相关变化，包括本例所用到的监测指定元素的宽高尺寸。下面给出本文示例的完整代码：

<style>
#mydiv {
	margin: 20px;
	width: 400px;
	min-width: 200px;
	height: 200px;
	min-height: 100px;
	border: 1px solid tan;
	overflow: hidden;
	box-sizing: border-box;
	resize: both;
	padding: 10px;
}
</style>

<div id="mydiv">change me</div>

<script>

const resizeObserver = new ResizeObserver(() => {
	mydiv.innerText = '宽：' + mydiv.offsetWidth + '\n高：' + mydiv.offsetHeight;
});

resizeObserver.observe(mydiv);

</script>

前一篇: JS数组按中间大两头小的次序排列
下一篇: JS：同步、异步与回调