Question

在css中定义display:block时，element.style.display将始终为空。

＆＃13;

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

＆＃13;

#map {display: block;}

＆＃13;

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

＆＃13;

但是如果你在该元素中设置样式，那么我们可以获得style.display细节。

＆＃13;

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

＆＃13;

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

＆＃13;

我不想要这些解决方案，因为我知道它有很多解决方案：

getElementById().style.display does not work

Show/Hide google maps api does not work fine

我的问题不同。

内联样式不是一种好的编码方式。所以我们总是在CSS中分配样式。但是为什么它在CSS而不是通过元素提供样式属性时显示为空？ JavaScript是否特别无法读取css样式属性？

你可以在这里查看，即使我提供display: block; align-content:center;，所有的样式属性都是空的。的为什么吗

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

element.style返回html文档中使用的内联样式，因为样式不是直接在html中设置的，所以你得到的是空值

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

HTMLElement.style属性用于获取和设置内联样式的元素。在获得时，它返回一个 CSSStyleDeclaration对象，包含所有样式的列表具有为属性指定的值的该元素的属性在元素的内联样式属性中定义。

HTMLElement.style

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

#map {
      display: block;
    }

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

在上面的代码段中，您的HTML元素没有style属性。因此，您的JavaScript对象的样式属性也不包含显示属性。因此，console.log(document.getElementById('test').style.display)不会打印任何内容。

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

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

在上面的代码段中，您的HTML元素的样式属性为“display”。因此，您的JavaScript对象包含一个包含display属性的样式属性。这就是console.log(document.getElementById('test').style.display)打印'无'

的原因

DOM API提供了一种将HTML元素作为JavaScript对象进行操作的方法。您的HTML元素可能在其class属性中定义了为其授予CSS属性的类，但您的JavaScript对象仅在其className属性中包含类名。 DOM API不解析CSS以更新JavaScript HTMLElements。

为什么element.style在CSS中提供样式时总是返回空？

2 个答案: