MutationObserver：如何观察 flex child 的宽度/高度的变化？

Question

鉴于以下 DOM 结构...

<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 规则...

#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 的宽度/高度的变化？

这通常通过观察style 属性中的突变来完成，并在样式发生更改时检查元素的边界（或其他一些变体）。但是，作为一个 flex 容器和子元素，我注意到当我检查元素的宽度/高度时，它们没有被定义。

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

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

帮助不胜感激！

PS：我尝试将#content 上的flex-basis 设置为我选择的阈值，但这没有帮助。我想知道是否应该定义 width 而不是 flex-basis.. 但是我不确定这是否会产生不希望的 flex 行为。

Answer 1

您可以在内部使用 offsetWidth/offsetHeight 属性、getBoundingClientRect() 方法或 getComputedStyle() 方法一个函数说，checkWidth() 然后在事件或函数改变元素的尺寸时调用该函数。

例如，resize 事件将更改元素的尺寸，因此在触发调整大小事件时运行此函数。

---

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

/* 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>