определение медиа-стиля элемента DOM с использованием JS - PullRequest
Новая
       9

определение медиа-стиля элемента DOM с использованием JS

1 голос
/ 30 апреля 2020

Я хочу знать display CSS элемента DOM. Обычно я использую что-то вроде document.getElementById('hello-world').style.display, но когда стиль задается с помощью CSS @media Rule, я не вижу никаких изменений в этом значении.

По какой причине? И как бы я мог получить эту информацию.

Вот пример для демонстрации https://codepen.io/liywjl/pen/JjYyqVv

Код: 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)
})

1 Ответ

2 голосов
/ 30 апреля 2020

Вы можете использовать 

window.getComputedStyle(document.getElementById('hello-world')).display

Однако тогда может быть задержка между настройкой стиля и перетеканием страницы, и это может работать не во всех браузерах.

...