Comment puis-je obtenir la nouvelle hauteur de div après que le contenu du div change? En utilisant JQuery, c'est facile, mais j'ai des problèmes avec cela en javascript vanille.
J'ai essayé de joindre un écouteur d'événement au div, mais il ne se déclenche jamais.
this.staticPageService.getData('test').subscribe(payload => {
this.divContent = payload.content;
});
Le contenu du div est changé dynamiquement après avoir été récupéré sur le serveur. J'ai essayé d'obtenir la hauteur avec un rappel une fois la requête http terminée, mais l'élément element.offsetHeight ou la commande ci-dessus renvoie toujours l'ancienne hauteur lorsque le div n'a pas de contenu à l'intérieur.
Le code qui change le contenu de la div:
document.getElementById('test').addEventListener('DOMContentLoaded', function() {
console.log(document.getElementById('cookies-popup').getBoundingClientRect().height);
});
Des idées?
Merci
3 Réponses :
Manière évidente pour addEventListener ('DOMContentLoaded', () => {}) de l'utiliser comme
document.addEventListener('DOMContentLoaded', () => {})
pas sur un seul élément.
Essayez d'utiliser getComputedStyle let elem = document.getElementById('cookies-popup')
let ht = window.getComputedStyle(elem ).getPropertyValue('height')
J'ai essayé cela et il renvoie l'ancienne hauteur lorsque le div n'a pas de contenu. Peut-être que je ne l'ai pas placé au bon endroit.
Après avoir modifié le contenu de votre div, vous pouvez appeler une fonction pour obtenir la nouvelle hauteur de votre div.
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
}
Je ne sais pas maintenant est .divContent mais je pense que vous pouvez utiliser element.innerHTML à la place.
Si vous devez utiliser .divContent , essayez pour utiliser setTimeout.
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
}
Il renvoie 0 comme hauteur.
Où est le code qui change la hauteur de votre div?
Le code modifie le contenu du div et par conséquent la hauteur, il ne définit pas de nouvelle hauteur fixe.
Bien sûr, mais je pense que l'événement "DOMContentLoaded" n'est pas approprié ici. Vous devrez peut-être obtenir la "hauteur" après le changement de div. Pouvez-vous publier le code qui modifie le contenu div?
Terminé. this.divContent est le nouveau contenu du div qui est ensuite connecté au div en utilisant [innerHtml] angular.