MutationObserver:如何观察弹性儿童的宽度/高度变异? [英] MutationObserver: How to observe mutations in width/height of flex child?

问题描述

给出以下DOM结构...

Given the following DOM structure...

<div id="outer-container">
  <div class="side-panel"><div width="200px"/></div>
  <div id="content"><!-- some content --></div>
  <div class="side-panel"><div width="100px"/></div>
</div>

使用以下CSS规则...

With the following CSS rules...

#outer-container {
  display: 'flex';
  align-items: 'stretch';
  width: '100vw';
  height: '100vh';
}

.side-panel {
  flex-shrink: 0;
}

#content {
  display: 'flex';
  flex-direction: 'column';
  align-items: 'stretch';
  flexGrow: 1;
}

如何观察#content的宽度/高度的突变?

How can I observe mutations to the width/height of #content?

这通常是通过观察style属性中的突变，并在样式更改时检查元素的边界(或某些其他变体)来完成的.但是，作为Flex容器&孩子，我注意到当我检查元素的宽度/高度时，它们没有被定义.

This is typically done by observing mutations in the style attribute, and checking the bounds of the element (or some other variation) when the style has changed. However, being a flex container & child, I notice that when I inspect the width/height of the element, they are not defined.

更改为#content的大小不会从我的MutationObserver(使用以下配置:{attributes: true, attributeFilter: ['style']})产生事件

Changes to the size of #content does not produce events from my MutationObserver (which uses the following config: {attributes: true, attributeFilter: ['style']})

我的用例是当#content宽度减小到某个定义的阈值以下时，将侧面板变成抽屉.我正在使用React，但是这似乎是本地的html/js问题.

My use case here is to turn the side panels into drawers when the #content width decreases below some defined threshold. I am working with React, however this seems to be a native html/js problem.

非常感谢您的帮助！

PS:我尝试将#content上的flex-basis设置为我选择的阈值，但这无济于事.我想知道是否应该定义width而不是flex-basis.但是我不确定这是否会产生不需要的弯曲行为.

PS: I tried setting flex-basis on #content to my chosen threshold, but this didn't help. I wonder if I should define a width instead of flex-basis.. however I'm unsure if this will produce undesired flex behaviour.

推荐答案

您可以使用 getComputedStyle() 方法说，checkWidth()然后在事件或函数改变元素尺寸时调用该函数.

You can either use the offsetWidth/offsetHeight properties, the getBoundingClientRect() method or the getComputedStyle() method inside a function say, checkWidth() then invoke the function whenever an event or function alters your element's dimensions.

例如， resize 事件将更改元素的尺寸，因此在触发resize事件时运行此功能.

For example, a resize event will change your element's dimensions so run this function when a resize event is fired.

检查并运行以下代码段，然后调整浏览器大小或单击按钮，以获得上述示例的实际示例:

Check and run the following Code Snippet then resize your browser or click the button for a practical example of what I have described above:

/* JavaScript */

function checkWidth(){
  let e = document.getElementById("content");
  let widthA = window.getComputedStyle(e).width;
  let widthB = e.getBoundingClientRect().width;
  let widthC = e.offsetWidth;

  console.log("getComputedStyle: " + widthA);
  console.log("getBoundingClientRect: " + widthB);
  console.log("offsetWidth: " + widthC);
};

window.addEventListener("resize", checkWidth); //checkWidth() added since "resize" alters your element's dimensions

function editContent(){
  let e = document.getElementById("content");
  e.style.width = "300px";
  
  checkWidth(); //checkWidth() added since editContent() alters your element's dimensions
}

document.getElementById("btn").addEventListener("click", editContent);

/* CSS */

#outer-container {
  display: flex;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
}

.side-panel {
  flex-shrink: 0;
}

#content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: 1;
}

<!-- HTML -->

<button id="btn">Click Me</button>
<hr/>
<div id="outer-container">
  <div class="side-panel">
    <div style="width: 200px">Left</div>
  </div>
  <div id="content">Middle</div>
  <div class="side-panel">
    <div style="width: 100px">Right</div>
  </div>
</div>

这篇关于MutationObserver:如何观察弹性儿童的宽度/高度变异?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！