为什么element.style在JS中总是返回空？

Question

display:block在CSS中定义时，element.style.display总是返回空。

console.log(document.getElementById('test').style.display)

#map {display: block;}

<div id="test">test</div>

但是，如果您在该元素中设置样式，则可以获取style.display详细信息。

    console.log(document.getElementById('test').style.display)

 <div style="display:none" id="test">test</div>

我不需要解决方案，因为我知道有很多解决方案：

我的问题不同。

内联样式不是编码的好方法。因此，我们总是在CSS中分配样式。但是，为什么在提供style属性CSS而不是通过element 时却显示为空？JavaScript是否特别无法读取cssstyle属性？

您可以在下面检查，即使我提供了，所有样式属性都为空display: block; align-content:center;。为什么？

console.log(document.getElementById('test').style)

#map {display: block;align-content:center;}

<div id="test">test</div>

Answer 1

element.style返回html文档中使用的内联样式，由于该样式不是直接在html中设置的，因此您将获得且值为空

您正在寻找的是computeedStyle，它将返回应用于元素的样式

console.log(window.getComputedStyle(document.getElementById('test')).display)

#map {
      display: block;
      align-content:center;
    }

<div id="test">test</div>