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

Question

我想知道 DOM 元素的 display CSS。通常我会使用 document.getElementById('hello-world').style.display 之类的东西，但是当使用 CSS @media Rule 设置样式时，我看不到此值有任何变化。

有什么原因吗？我将如何获得这些信息。

代码： 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

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

determining DOM element media style using JS