I write following function to return the width and height of a text:
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))I am quite confused why after I remove the div, all styles' property in the computed_styles will become "" nothing, but before I remove the div, all styles' property in the computed_styles has something different than "".
In my understanding, the value for variable will not be changed and is static unless we write any update or reassign statement once declared (AM I Wrong?)
Why the computed_styles will be automatically update?
Thank you!
P.S: not asking for solution (solution quite easy), but curious why.