JS：实时监测元素宽高变化

马黑黑 · 发表于 2023-9-9 10:35

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

change me

上面的 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>

马黑黑 · 发表于 2023-9-9 10:40

没有 es6 的此类接口之前，检测元素宽高尺寸变化的方法主要有：

其一，使用用定时器 setInterval ；
其二，使用基于 window 对象的 onrisize 事件。

这些都是变通的方法，既没有 ResizeObserver API 专业，在性能、消耗等方面也不尽如人意。

马黑黑 · 发表于 2023-9-9 12:11

顺便提一下：注意观察CSS，虽然CSS不是本帖的重点。它包含的第一个知识点是——

box-sizing

如果我们将 CSS 代码中的 box-sizing: border-box; 删掉，则一楼运行的初始结果是：
宽：422
高：222

这是因为，box-sizing 属性缺省或默认时，不将边框（border）、内边距（padding）的值算入 width 和 height 这两个属性的设置里边，边框和内边距当有值时，它们就会乘以 2 然后加入到实际渲染的元素的宽、高。而当设置了 box-sizing 属性为 border-box，则，内边距和边框都划入 width 和 height 属性设置中，width 和 height 的值都已经包含了 border 和 padding 的值。

第二一个知识点是元素可拖曳设置——

其一：需要设置 resize 属性，值为 both 时表示可以向水平、垂直方向拖曳改变大小，值为 horizontal 只能左右、值为 vertical 只能上下拖曳改变大小，值为 none 或该属性缺省时元素不能通过拖曳改变大小；

其二：要令元素可拖曳改变大小，还需一个前提，就是 overflow 属性必设置为 hidden。

第三个知识点是元素尺寸限制——

例中，CSS 代码 min-width 和 min-height 两个属性设置，值分别为 200px 和 100px，这表示往小里拖曳元素时，元素的尺寸最小也只能是 200 * 100 的宽高。设置最大值同理，使用的属性分别是 max-width 和 max-height。