使用 JavaScript 获取元素的 CSS 显示值

Get an Element’s CSS Display Value using JavaScript

要获取元素的 CSS 显示值：

选择元素。
将元素作为参数传递给window.getComputedStyle()方法。
访问display结果的属性。

这是示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <button id="btn" style="display: block">Button</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const btn = document.getElementById('btn');

const display = window.getComputedStyle(btn).display;

console.log(display); // 👉️ "block"

window.getComputedStyle
()
方法在应用样式表后返回一个包含元素所有 CSS 属性值的对象。

返回的对象是活动CSSStyleDeclaration对象。这意味着如果元素的 CSS 属性得到更新，对象将自动反映更改。

索引.js


const btn = document.getElementById('btn');

const btnStyles = window.getComputedStyle(btn);

console.log(btnStyles.display); // 👉️ "block"

btn.style.display = 'inline-block';

console.log(btnStyles.display); // 👉️ "inline-block"

display该示例显示更新元素的属性如何更改方法返回的对象中的属性值。 buttongetComputedStyle

style.display 与 window.getComputedStyle

您可能已经看到使用该style.display属性访问元素的显示值的示例。

索引.js


const btn = document.getElementById('btn');

const display = btn.style.display;

console.log(display); // 👉️ "block"

style.display但是，使用和访问方法返回的display对象的属性之间存在一些差异getComputedStyle：

getComputedStyle返回一个只读对象，而element.style
返回一个可用于设置元素样式的对象。
getComputedStyle考虑外部样式表，而
element.style没有。
getComputedStyle会考虑继承的 CSS 属性，而
element.style不会。

话虽这么说，如果您没有display从外部样式表设置元素的属性，并且元素没有从父元素继承属性，则可以使用该style.display属性来读取值。

请注意，您应该始终使用该element.style对象来设置和更新元素的 CSS 属性。