0

类似resize一样

查看全部 9 个回答

0

我给个比较另类的思路,可以用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上的样式变化。。。

推荐答案

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 尺寸变化,这个回路有点长。