使用 JS 确定 DOM 元素媒体样式

Question

我想知道 DOM 元素的 display CSS。通常我会使用 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)
})

Answer 1

你可以使用

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

但是，样式设置和页面重排之间可能会有延迟，这可能不适用于所有浏览器。