MutationObserver 是否观察到跨度的 offsetHeight 属性的变化？

Question

我正在尝试使用MutationObserver来观察跨度何时改变高度(当跨度内的文本改变大小时(。但是似乎没有出现任何突变，即使检查跨度的 offsetHeight 属性确实显示出变化。是否没有观察到财产变化？

let mutationobserverconfig = {
attributes: true,
childList: true,
subtree: true
}; 
function onmutation(mutations) {
for (let mutation of mutations) {
log("resizemutationobserver");
// for
}
// onmutation
}
let resizemutationobserver;
function addresizemutationobserver(element, callback) {
// callback is in the module using this function

resizemutationobserver = new MutationObserver(onmutation);
let targetnode = $(element)[0];
resizemutationobserver.observe(targetnode, mutationobserverconfig); //
}

Answer 1

在这个问题上，区分属性和属性很重要。 这个答案对此进行了详细解释。

HTML 元素具有属性，其中一些属性由相应 DOM 接口(节点(的属性反映。

接口具有一些附加属性(例如offsetHeight(，没有匹配的 HTML 属性。

当MutationObserver观察对属性所做的更改时，它不会监视offsetHeight的更改。

---

要监视元素大小的变化，您可以使用ResizeObserver代替(到目前为止，它已获得广泛支持(。

Answer 2

ResizeObserver

是正确的API，但是如果您有span则需要将其设置为内联块元素：

span.some-text 
{
display: inline-block
}

block也可以工作，但它只会反映其父容器的大小。