检测DOM尺寸变化JS API ResizeObserver简介 一、关于MutationObserver提两句 DOM元素的属性或者节点变化的检测，我们可以使用MutationObserver对象，（dom精度检查）

检测DOM尺寸变化JS API ResizeObserver简介 一、关于MutationObserver提两句 DOM元素的属性或者节点变化的检测，我们可以使用MutationObserver对象，（dom精度检查）

检测DOM尺寸变化JS API ResizeObserver简介

一、关于MutationObserver提两句

DOM元素的属性或者节点变化的检测，我们可以使用MutationObserver对象，IE11+支持，具体可以参见“聊聊JS DOM变化的监听检测与应用”这篇文章。

但是如果我们想要检测到DOM元素尺寸变化，在过去是没有专门的API的，多借助window对象上绑定resize事件。

但是DOM元素的尺寸变化，有时候窗体的尺寸没有变化也会触发。还有的时候窗体的尺寸变化了，但是DOM元素的尺寸并没有变化，window对象上绑定的resize事件就有些浪费。

由于以上一些原因，一个全新的API就出来了，就是ResizeObserver对象，专门用来观察DOM元素的尺寸是否发生了变化。

这个API游览器支持的非常迅速，我记得去年看的时候才chrome浏览器支持，现在Firefox浏览器也支持了，Safari也确定会支持，估计不用多久就可以使用了。

同时也从侧面说明了，如果一个元素的content box的尺寸没有发生变化，那么也是不会触发ResizeObserver观察执行的，哪怕你改变了元素的padding值，或者改变了元素的border-width边框尺寸，都不会认为是DOM元素尺寸变化了。

其中inlineSize表示内联元素排列方向上的尺寸，等同于CSS逻辑属性inline-size，在默认文档流下表示宽度；blockSize表示块级元素排列方向上的尺寸，等同于CSS逻辑属性block-size，在默认文档流下表示高度。

三、ResizeObserver实际应用案例

1. 原生resize行为的检测

例如，有了ResizeObserver，我们就可以检测的resize拉伸行为了。</p><p>比方说<textarea>尺寸拉伸的时候，我们可以让边框的颜色不断变化起来。</p><p>2. 感知交互行为的发生</p><p>当元素里面的内容变多或变少的时候，如果没有把高度和宽度定死，则我们可以通过观察元素的尺寸是否有变化，而知道是否有交互行为发生。</p><p>例如，我们在使用Ajax发表评论的时候，需要把评论写入到现有的评论列表，通过观察评论容器的尺寸变化，我们就可以认为这个评论交互已经完成，然后脱离具体的业务逻辑完成其他一些需求，例如数据埋点，我们只需要观察特定容器尺寸是否变化，然后发送埋点数据即可。优点是数据埋点无侵入，无需写入到业务逻辑中，非常灵活，也利于日后维护。</p><p>3. 感知元素是否显示或隐藏</p><p>当一个元素使用display:none进行隐藏的时候，也是会触发尺寸变化的，于是也能够被观测到。</p><p>基于尺寸的观测要比基于属性的观测要更精准。因为一个元素的隐藏可能是通过其他元素的属性变化触发的，例如其他元素添加了一个类名，这个类名正好可以影响当前元素的隐藏。</p><a href='https://www.eolink.com?utm=jiasou' target='_blank'><img style='width:100%;height:100%' src='https://www.eolink.com/news/zb_users/upload/2022/08/20220805174511165969271139602.jpg'></a><br> <p> <strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong> </p></div> <div class="article_footer clear"> <div class="fr tag">标签：<a href="https://www.eolink.com/news/tags-3253.html">案例</a> </div> <div class="bdsharebuttonbox fl share"> <div class="share-widget fl"> <div class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div> <!-- 广告位ad4 --> <div class="post-navigation clear"> <div class="post-previous fl"> <span>上一篇:</span><a href="https://www.eolink.com/news/post/29468.html">共建数字生态，天空卫士承办天津互联网协会网络与数专委成立大会</a> </div> <div class="post-next fr"> <span>下一篇:</span><a href="https://www.eolink.com/news/post/29470.html">Java Condition类案例详解</a> </div> </div> </div> <div class="related_article"> <div class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相关文章</span> </div> <div class="related_list clear"> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/88964.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/2.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/88964.html" title="Java中接口有什么用">Java中接口有什么用</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>280</span> <span><i class="fa fa-clock-o"></i>2022-10-01</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/88946.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/7.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/88946.html" title="C# 怎么使用默认接口方法">C# 怎么使用默认接口方法</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>280</span> <span><i class="fa fa-clock-o"></i>2022-10-01</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/88931.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/3.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/88931.html" title="C#接口方法的实例介绍">C#接口方法的实例介绍</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>280</span> <span><i class="fa fa-clock-o"></i>2022-10-01</span> </div> </div> </article> </div> </div> <div id="comment" class="post-comment clearfix sb br mt"> <p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i> 发表评论</span></p> <div class="compost"> <form id="frmSumbit" target="_self" method="post" action="https://www.eolink.com/news/zb_system/cmd.php?act=cmt&postid=29469&key=da267a86000a14dcb2518639f3be5cc9"> <input type="hidden" name="inpId" id="inpId" value="29469"/> <input type="hidden" name="inpRevID" id="inpRevID" value="0"/> <div class="com-name"> <a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a> </div> <div class="com-info"> <ul> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址"> </li> </ul> </div> <div class="com-box"> <textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1">