Why ican't it find the display property? (more below)

Question

I added a event listener to a button, which would show the css of the #popUpForm, however on the console it logs nothing.

markup:

<input id = "addItem" type = button value = "+">
                
<div id = "popUpForm">
    /* lot of divs*/
</div>

script:

const addBtn = document.querySelector('#addItem')

addBtn.addEventListener('click', function(){
    console.log(document.querySelector('#popUpForm').style.display)
})

css:

#popUpForm{
    width: 350px;
    height: 500px;

    display:none;  <-- looking for this
}

I'm using webpack, is it possible, that somehow it messes up my code? Any help appreciated!

Answer 1

element.stylerefers to inline styles only.

To check for currently applied styles regardless of the source, use

window.getComputedStyle(document.querySelector('#popUpForm')).display

instead. Beware that this a very expensive call performance-wise, so only ever use it when no better solution is available.

That being said, I'd suggest working with the API for the job, which is the hidden API, which would simplify the check for visibility to

document.querySelector('#popUpForm').hidden

Especially, this makes it very easy to toggle visibility:

document.querySelector('#popUpForm').hidden = !document.querySelector('#popUpForm').hidden