JS怎么实时监视一个div尺寸变化？

Question

类似resize一样

Answer 1

有相关的 Web API: ResizeObserver
https://web-api-examples.github.io/resizeobserver.html

Answer 2

看看隔壁SF上的

http://marcj.github.io/css-el...

这个css-element-queries可以实现元素级别的基于宽高的queries,同时提供一个ResizeSensor类，可以酱紫用：

new ResizeSensor(document.querySelector('#divId'), function(){ 
    console.log('content dimension changed');
});

原理嘛，用的是 requestAnimationFrame 监测，低版本浏览器用的是setTimeout(fn, 20)定时轮询。

所以最好还是通过程序逻辑实现，程序数据变化导致 DOM 变化，从而浏览器重新绘制，再通过浏览器绘制事件然后反过来监测 div 尺寸变化，这个回路有点长。

Answer 3

正要推荐，看到有人提到 css-element-queries 了，然而这个并不是通过 requestAnimationFrame 轮询的，是非常巧妙地基于滚动事件触发的，性能非常可观，原理可以看这里。

小 Demo https://codepen.io/straybugs/...

Answer 4

onresize好像只能对window设置， 对div发现不起效果。
是什么事件触发了div的改变大小？把事件写到那里去不行？

Answer 5

我给个比较另类的思路，可以用MutationObserver来监控style上的变化~

Demo代码：

var observer = new MutationObserver(function (mutations, observer) {
    mutations.forEach(function (mutation) {
        console.log(mutation);
    });
});
var config = {
    attributes: true,
    attributeOldValue: true,
    attributeFilter: [
        'style'
    ]
};
var el = document.getElementById('keng'); //这个你自己改下~
observer.observe(el, config);

不过这个方法的限制在于，它只能监控style上的样式变化。。。

Answer 6

https://github.com/cowboy/jqu...

Answer 7

你是怎么让div的尺寸发生变化的？难道不是通过改变一个值吗？这个值你保存起来就行了呀。

Answer 8

我猜想你的需求应该是在窗口变化的时候，刷新某一块元素的内容。
要处理这个情况，一般情况下会把对应元素设置成百分比，这样在窗口大小变化的时候，元素也自然会发生变化。
如果需求是我所说的这样，监听window.resize即可。

Answer 9

目前想到的办法是设置一个定时器去轮询

Answer 10

监听onpropertychange事件，事件发生时对比上一次的width和height。不知道可不可行，突然想到的思路。