MutationObserver 是否观察到 span 的 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

在这个问题中，区分 attaribute 和属性很重要。这在 this answer 中有详细解释。

HTML个元素是有属性的，其中一些属性反映在对应的DOM接口（节点）的属性上。

接口有一些额外的属性（例如offsetHeight）没有匹配的HTML属性。

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

Answer 2

ResizeObserver 是正确的 API 使用方法，但如果您有 span，则需要将其设置为行内块元素：

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

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

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

Does MutationObserver observe changes to a span's offsetHeight property?

javascript

mutation-observers

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

Does MutationObserver observe changes to a span's offsetHeight property?

javascript

mutation-observers

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