Escribo la siguiente función para devolver el ancho y el alto de un texto:

 function size_calculation(word,fontSize) { const div = document.body.appendChild(document.createElement('div')); div.textContent = word; div.style.cssText = ` font-size:${fontSize}px; width:auto; position:absolute; visibility:hidden; ` const computed_styles = window.getComputedStyle(div); //return the expected height console.log(computed_styles.getPropertyValue('height')) div.remove(); //return nothing console.log(computed_styles,computed_styles.getPropertyValue('height')) return ({ height: computed_styles["height"], width:computed_styles["width"] }) } console.log(size_calculation("hi",15))

Estoy bastante confundido por qué después de eliminar el div , la propiedad de todos los estilos en los estilos computed_styles se convertirá en "" nada, pero antes de eliminar el div , la propiedad de todos los estilos en los estilos computed_styles tiene algo diferente a "" .

Según tengo entendido, el valor de la variable no se cambiará y es estático a menos que escribamos una declaración de actualización o reasignación una vez declarada (¿Estoy equivocado?)

¿Por qué los estilos_computados se actualizarán automáticamente?

¡Gracias!

PD: no pido solución (solución bastante fácil), pero curioso por qué.