I am trying to retrieve the CSS display
property of a DOM element. Normally, I would use something like
document.getElementById('hello-world').style.display
. However, when the style is set using a CSS @media Rule, I do not see any change in this value.
Is there a specific reason for this behavior? And how can I obtain this information?
For a better understanding, here is a demonstration: https://codepen.io/liywjl/pen/JjYyqVv
Code: HTML
<p id="hello-world">Hello world</p>
CSS
@media (min-width: 980px) {
#hello-world {
display: none;
}
}
JS
window.addEventListener('resize', function(){
console.log(document.getElementById('hello-world').style.display)
})