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 :
5a323d22658d3762460195.png
June 10th 19 at 15:18
3 answers
June 10th 19 at 15:20
Solution
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');
Thank you very much! Now I'll know! - Antonio commented on June 10th 19 at 15:23
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.
June 10th 19 at 15:24
if(screen.height =< 1000 )

Find more questions by tags Media queriesCSSHTMLJavaScript