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

在div的内容更改后，如何获取新的div高度？使用JQuery，这很容易，但我在香草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;
});

有什么想法吗

---

感谢addEventListener（'DOMContentLoaded'，（）=>{}）使用它作为

document.addEventListener（'DOMContentLoaded'，（）=>{}）

不在单个元素上。

尝试使用

---

更改div的内容后，可以调用函数来获取div的新高度

this.staticPageService.getData（'test'）.subscribe（有效负载=>{
this.divContent=payload.content；
getHeightDiv（“cookies-popup”）；
});
函数getHeightDiv（idElem）{
log（document.getElementById（idElem.getBoundingClientRect（）.height）；
返回文档.getElementById（idElem）.getBoundingClientRect（）.height
}

更新 我现在不知道什么是

.divContent

，但我认为您可以使用

元素.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
}

---

更改div高度的代码在哪里？该代码更改div的内容，从而更改高度，它没有设置新的固定高度。当然，但我认为事件“DOMContentLoaded”在这里不合适。在更改div后，您可能需要获取“height”。您可以发布更改div内容的代码吗？完成。this.divContent是div的新内容，然后使用angular的[innerHtml]连接到div。我已经尝试过了，当div没有内容时，它会返回旧的高度。可能我没有把它放在正确的位置。它返回0作为高度。

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
}