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：我尝试将flex-basis上的#content设置为我选择的阈值，但这无济于事。我不知道是否应该定义width而不是flex-basis。但是我不确定这是否会产生不希望的弯曲行为。

Answer 1

您可以使用 offsetWidth / offsetHeight 属性， getBoundingClientRect() 方法或 {{3 }} 函数中的方法说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>

MutationObserver：如何观察弹性儿童的宽度/高度变异？

1 个答案: