js+监视html发生变化,【Web前端问题】JS怎么实时监视一个div尺寸变化？

类似resize一样

回答：

回答：

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

new ResizeSensor(document.querySelector('#divId'), function(){

console.log('content dimension changed');

});

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

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

回答：

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

回答：

onresize好像只能对window设置， 对div发现不起效果。

是什么事件触发了div的改变大小？把事件写到那里去不行？

回答：

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

回答：

回答：

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

回答：

我猜想你的需求应该是在窗口变化的时候，刷新某一块元素的内容。

要处理这个情况，一般情况下会把对应元素设置成百分比，这样在窗口大小变化的时候，元素也自然会发生变化。

如果需求是我所说的这样，监听window.resize即可。

回答：

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

回答：

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