0

类似resize一样

9个回答

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

0
0

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

0

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

0

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

0

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

0

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

0

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

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

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上的样式变化。。。

撰写答案