js 监听div的resize事件

LifeFuture1994

已于 2023-01-29 13:09:52 修改

阅读量854

点赞数

分类专栏：前端文章标签： javascript 前端 html Powered by 金山文档

于 2023-01-29 13:08:06 首次发布

原文链接：https://www.jianshu.com/p/1b572ab435c6

版权

前端专栏收录该内容

190 篇文章 2 订阅

订阅专栏

我们平时在监听resize变化时，一般监听的都是window/body。

可以绑定onresize的标签 body

可以绑定onresize的对象 window

只有一个起作用,后定义覆盖前定义的

但是有时我们希望监听div的resize变化该怎么办呢？尤其是现在css提供了resize属性。

解决方案如下：

通过添加object(text/html), http://www.backalleycoder.com

https://github.com/sdecima

https://caniuse.com

定时器 + getComputeStyle

基于resze和MutationOberver https://github.com/que-etc/re...

写了一个小示例，基于ResizeObserver API

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="div"
      style="
        width: 300px;
        height: 300px;
        border: 1px solid red;
        resize: both;
        overflow: hidden;
      "
    ></div>
    <script>
      const resizeObserver = new ResizeObserver(onResize);
      resizeObserver.observe(document.querySelector('#div'));

      function onResize(e) {
        console.log(e);
      }
    </script>
  </body>
</html>

参考地址：

https://segmentfault.com/q/1010000011959064

https://juejin.cn/post/7068542198047834126

LifeFuture1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 监听div的resize事件

我们平时在监听resize变化时，一般监听的都是window/body。可以绑定onresize的标签 body可以绑定onresize的对象 window只有一个起作用,后定义覆盖前定义的但是有时我们希望监听div的resize变化该怎么办呢？尤其是现在css提供了resize属性。
复制链接

扫一扫