Why not working code (Javascript)?

Question

Why not working code (Javascript)?

There

Also have a media request

@media screen and (max-width: 1000px) {
.left-menu{
 display: none;
}
}

Write code in js:

var leftMenu = document.querySelector(".left-menu");
console.log(leftMenu.style.display == 'none');

And it shows me false, when the screen is less than 1000px, despite the fact that in chrome shows that display: none :

Antonio asked June 10th 19 at 15:18

Related questions

More answers about "Why not working code (Javascript)?"

3 answers

Aurore_Jenki answered on June 10th 19 at 15:22

leftMenu.style.display it inline styles. If you set the styles using CSS they will not appear in the style property of an element. They have to read differently.

Bernie answered on June 10th 19 at 15:24

if(screen.height =< 1000 )

Lenny.Botsfo answered on · Accepted Answer · 2019-06-10T13:20:29.589Z

Because the rule display for your component is set by the selector css, but is not the key properties of its own style.

So will work:

var leftMenu = document.querySelector(".left-menu");
var displayValue = window.getComputedStyle(leftMenu is null).getPropertyValue("display");
console.log(displayValue === 'none');