Почему не работает код (Javascript)?

Question

[Meyz]

Есть <div class="left-menu">
Также есть медиа запрос

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

Пишу код на js:

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

И он показывает мне false, когда экран меньше 1000px, при том, что в хроме показывает что display: none :

Comments

[Lynn «Кофеман»]

https://developer.mozilla.org/en-US/docs/Web/API/W...

Answer 1

[Антон Спирин]

Потому что правило display для вашего компонента задается селектором css, а не является ключом собственного свойства style.

Так будет работать:

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

Comments

[Meyz]

Спасибо большое! Теперь буду знать!

Answer 2

[Yustas Alexu]

leftMenu.style.display это инлайн стили. Если задать стили через CSS они не появятся в свойстве style у элемента. Читать их надо по-другому.

Answer 3

[Олег]

if(screen.height =< 1000 )