在HTMLElements上观察隐式大小的变化
在HTMLElements上观察隐式大小的变化
提问于 2018-10-08 06:27:41
虽然MutationObserver允许监视HTMLElement属性的显式大小更改，但它似乎没有允许我监视由浏览器计算的对其大小的隐式更改的方式/配置。
下面是一个例子：
const observer = new MutationObserver(changes => {
console.log('changed')
})
observer.observe(document.querySelector('#bar'), {
attributes: true
})
document.querySelector('#foo').style.width = '200px'.container {
display: flex;
align-items: stretch;
}
.child {
width: 100px;
height: 100px;
margin: 0 2px;
background: magenta;
}<div class="container">
<div class="child" id="foo"></div>
<div class="child" id="bar"></div>
</div>
在上面的例子中，我改变了#foo的大小，同时观察了#bar。#bar get被#foo压缩(它的宽度变化是隐式的，因为浏览器计算它的宽度，而不是我显式地指定它)。
如何才能检测到这种隐式大小更改？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-08 08:05:17
...However，只有在窗口对象:：MDN上才会触发调整大小的事件
新标准是:：调整观察者的大小
new ResizeObserver(()=>console.log('bar dimension changed :: RO!')).observe(bar);但是，虽然它只适用于晚期Chrome，但我建议使用一些库，比如：CSS-元素查询
<script src="css-element-queries-1.0.0/src/ResizeSensor.js"></script>
<script src="css-element-queries-1.0.0/src/ElementQueries.js"></script>
new ResizeSensor(bar, function(){
console.log('bar dimension changed :: CSS-Element-Queries');
});Stack Overflow用户
发布于 2018-10-08 07:27:04
Hi just take the javascript part to the end of the body
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
display: flex;
align-items: stretch;
}
.child {
width: 200px;
height: 100px;
margin: 0 2px;
background: magenta;
}
</style>
</head>
<body onload="">
<div class="container">
<div class="child" id="foo"></div>
<div class="child" id="bar"></div>
</div>
<script>
const observer = new MutationObserver(changes => {
console.log('changed')
});
observer.observe(document.querySelector('#bar'), {
attributes: true
});
document.querySelector('#foo').style.width = '400px'
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52696528
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号