Q: Read CSS literal value with Javascript I have this CSS property in style.css
.beatBlock {
    height: 0;
    transition: height 1s ease;
}

.beatBlock.beatBlockShow {
    height: 150px;
}

I want to be able to read the height literal value written in .beatBlockShow and retrieve the value 150 (or 150px, it doesn't matter).
The problem is, I can't do the following :


let beatBlock = document.createElement('div');
beatBlock.classList = 'beatBlock';
beatBlock.classList.add('beatBlockShow');

// of course it will give me a height between 0 and 150, because of the transition property
const literalHeight = beatBlock.offsetHeight; 
console.log(literalHeight);
.beatBlock {
    height: 0;
    transition: height 1s ease;
}

.beatBlock.beatBlockShow {
    height: 150px;
}
<div class="beatBlock">
<div class="beatBlockShow"></div>
</div>


How can I do this ? 
Thank you

A: You can append the div to your body (so that its styles can be evaluated) and then use getComputedStyle() to get the height of the element:


let beatBlock = document.createElement('div');
beatBlock.classList.add('beatBlock');
beatBlock.classList.add('beatBlockShow');

document.body.appendChild(beatBlock); // add div to DOM

const literalHeight = getComputedStyle(beatBlock).getPropertyValue('height');

console.log(literalHeight);
.beatBlock {
  height: 0;
  transition: height 1s ease;
}

.beatBlock.beatBlockShow {
  height: 150px;
}


