Question

更改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;
});

有什么想法吗？

谢谢

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
}

Answer 2

addEventListener（'DOMContentLoaded'，（）=> {}）使用它的明显方式

document.addEventListener('DOMContentLoaded', () => {})

不在单个元素上。

Answer 3

尝试使用getComputedStyle

let elem = document.getElementById('cookies-popup')
let ht = window.getComputedStyle(elem ).getPropertyValue('height')

在香草JavaScript中更改内容后获取div的高度

3 个答案:

更新