为什么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>