html - 突变观察者 : How to observe mutations in width/height of 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 事件将更改元素的尺寸，因此在触发 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>