IT技术 - 为什么 element.style 在 JS 中总是返回空？ - 吾爱随笔录

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

IT技术 javascript html css styles

2021-02-25 19:51:29

当您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>

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

getElementById().style.display 不起作用

显示/隐藏谷歌地图 api 无法正常工作

我的问题是不同的。

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

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

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

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

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

2个回答

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

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

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

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

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

如何在 js 中动态修改在单独的 css 文件中定义的 css 属性

2021-05-13 19:51:29

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

HTMLElement.style

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

#map {
      display: block;
    }

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

在上面的这段代码中，您的 HTML 元素没有style属性。因此，您的 JavaScript 对象的 style 属性也不包含 display 属性。所以，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 对象包含一个 style 属性，该属性包含一个 display 属性。这就是为什么console.log(document.getElementById('test').style.display)打印 'none'

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

其它你可能感兴趣的问题

上一篇是否可以使用 JavaScript 写入文件（在磁盘上）？下一篇为什么我们需要客户端和服务器端验证？