论坛 › 马黑黑教程专版 › JS：实时监测元素宽高变化

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

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

<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>
<p>上面的 div 元素可以拖曳右下角改变大小。该 div 能够实时、精准显示自身的高度和宽度尺寸，不论元素以何种方式改变尺寸。这得益于 JS 的 ResizeObserver API接口，它可以监视元素的相关变化，包括本例所用到的监测指定元素的宽高尺寸。下面给出本文示例的完整代码：</p>
<pre style="background: #eee; padding: 16px; tab-size: 4; font-size: 14px;">
&lt;style&gt;
#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;
}
&lt;/style&gt;

&lt;div id="mydiv"&gt;change me&lt;/div&gt;

&lt;script&gt;

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

resizeObserver.observe(mydiv);

&lt;/script&gt;

</pre>

<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。

红影 发表于 2023-9-9 13:45

这些知识点全都是干货啊，太好了。学习了，谢谢黑黑{:4_199:}

红影 发表于 2023-9-9 13:49

这个 JS 的 ResizeObserver API接口好方便，几句代码就成呢。

红影 发表于 2023-9-9 13:50

拉动这个可以锻炼眼力了，拉动一下，先不去看数值地凭眼力给出答案，然后再看看数值，看自己看出的尺寸对不对{:4_173:}

小辣椒 发表于 2023-9-9 16:25

我这脑子现在看过就忘记，做的时候又迷迷糊糊的哪里找不晓得了{:4_198:}

马黑黑 发表于 2023-9-9 16:53

红影 发表于 2023-9-9 13:45
这些知识点全都是干货啊，太好了。学习了，谢谢黑黑

JS部分是重点

马黑黑 发表于 2023-9-9 16:54

红影 发表于 2023-9-9 13:49
这个 JS 的 ResizeObserver API接口好方便，几句代码就成呢。

用定时器的话代码也不多，只是效率和性能没这个好

马黑黑 发表于 2023-9-9 16:54

小辣椒 发表于 2023-9-9 16:25
我这脑子现在看过就忘记，做的时候又迷迷糊糊的哪里找不晓得了

这个有些抽象

马黑黑 发表于 2023-9-9 16:55

红影 发表于 2023-9-9 13:50
拉动这个可以锻炼眼力了，拉动一下，先不去看数值地凭眼力给出答案，然后再看看数值，看自己看出的尺寸对不 ...

这叫目测{:4_170:}

小辣椒 发表于 2023-9-9 17:09

马黑黑 发表于 2023-9-9 16:54
这个有些抽象

主要没有基础，看过就忘记了

马黑黑 发表于 2023-9-9 17:43

小辣椒 发表于 2023-9-9 17:09
主要没有基础，看过就忘记了

这个别说小白，即便是玩乐许久的JS的人，也未必知道，除非通读过最新的JS文档

红影 发表于 2023-9-10 07:40

马黑黑 发表于 2023-9-9 16:53
JS部分是重点

是的，css里的知识也很重要。

红影 发表于 2023-9-10 07:41

马黑黑 发表于 2023-9-9 16:54
用定时器的话代码也不多，只是效率和性能没这个好

这个直接就给出结果了，而且是秒速，十分厉害{:4_187:}

红影 发表于 2023-9-10 07:43

马黑黑 发表于 2023-9-9 16:55
这叫目测

然后，测了好几次，发现我的目力有问题，通常偏差50px以上，严重时会差到100
我再去玩玩，看看早上起来会不会目力更好点。。。

马黑黑 发表于 2023-9-10 09:07

红影 发表于 2023-9-10 07:43
然后，测了好几次，发现我的目力有问题，通常偏差50px以上，严重时会差到100
我再去玩玩，看看早上起来 ...

这是正常的

马黑黑 发表于 2023-9-10 09:09

红影 发表于 2023-9-10 07:41
这个直接就给出结果了，而且是秒速，十分厉害

JS的最初版本的开发只有了 10 天时间，当时都没人看好它，没想到，它现在依然如火如荼

马黑黑 发表于 2023-9-10 09:11

红影 发表于 2023-9-10 07:40
是的，css里的知识也很重要。

前端三套件，HTML是演员，CSS是化妆师，JS是幕后总调度

红影 发表于 2023-9-10 10:00

马黑黑 发表于 2023-9-10 09:07
这是正常的

我去测过了，发现早上起来的感觉更豁边，差好多{:4_170:}

查看完整版本: JS：实时监测元素宽高变化