javascript - 在 Vanilla javascript中更改内容后获取div的高度

Question

div内容变化后如何获取div的新高度？使用 JQuery，这很容易，但我在 vanilla javascript 中遇到了问题。

我试图将事件监听器附加到 div，但它从未被触发。

document.getElementById('test').addEventListener('DOMContentLoaded', function() {
      console.log(document.getElementById('cookies-popup').getBoundingClientRect().height);
    });

div 的内容在从服务器获取后动态改变。我试图在http请求完成后通过回调获取高度，但是当div里面没有内容时，element.offsetHeight或上面的命令仍然返回旧的高度。

改变div内容的代码:

this.staticPageService.getData('test').subscribe(payload => {
    this.divContent = payload.content;
});

有什么想法吗？

谢谢

Answer 1

改变你的div的内容后，你可以调用一个函数来获取你的div的新高度。

this.staticPageService.getData('test').subscribe(payload => {
  this.divContent = payload.content;
  getHeightDiv('cookies-popup');
});


function getHeightDiv(idElem) {
  console.log(document.getElementById(idElem).getBoundingClientRect().height);
  return document.getElementById(idElem).getBoundingClientRect().height
}

更新

我现在不知道什么是 .divContent，但我认为您可以改用 element.innerHTML。

如果您需要使用.divContent，请尝试使用setTimeout。

this.staticPageService.getData('test').subscribe(payload => {
  this.divContent = payload.content;
  setTimeout(() => getHeightDiv('cookies-popup'), 100);
});


function getHeightDiv(idElem) {
  console.log(document.getElementById(idElem).getBoundingClientRect().height);
  return document.getElementById(idElem).getBoundingClientRect().height
}