CSS 如何获取DOM元素的display属性

在本文中，我们将介绍如何使用CSS获取DOM元素的display属性。display属性用于确定HTML元素在页面上的显示方式。通过获取和修改display属性，我们可以控制元素的显示和隐藏。

阅读更多：CSS 教程

1. 使用CSS的getComputedStyle()方法获取display属性值

我们可以使用CSS的getComputedStyle()方法来获取DOM元素的display属性值。getComputedStyle()方法返回一个包含计算后样式属性的对象，我们可以通过该对象获取指定元素的样式属性。

下面是使用getComputedStyle()方法获取display属性值的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .show {
      display: block;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div id="element" class="show">Hello World!</div>

<script>
  var element = document.getElementById("element");
  var style = window.getComputedStyle(element);
  var display = style.getPropertyValue("display");

  console.log(display); // 输出：block
</script>

</body>
</html>

在上面的示例中，我们首先定义了两个CSS类，.show 类设置元素的display属性为block，.hide 类设置元素的display属性为none。然后，我们通过JavaScript获取了id为”element”的div元素，并使用getComputedStyle()方法获取该元素的display属性值。最后，我们将display属性值输出到控制台。

注意：getComputedStyle()方法返回的属性值是一个字符串，可以是以下值之一：block、inline、inline-block、flex等。

2. 使用CSS的currentStyle属性获取display属性值

如果在旧版本的Internet Explorer（IE8及更低版本）中使用，getComputedStyle()方法将不起作用。此时，我们可以使用CSS的currentStyle属性来获取DOM元素的display属性值。

下面是使用currentStyle属性获取display属性值的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .show {
      display: block;
    }
    .hide {
      display: none;
    }
  </style>

  <script>
    function getDisplay() {
      var element = document.getElementById("element");
      var display = element.currentStyle ? element.currentStyle.display : window.getComputedStyle(element).getPropertyValue("display");

      console.log(display); // 输出：block
    }
  </script>
</head>
<body>

<div id="element" class="show">Hello World!</div>

<button onclick="getDisplay()">获取display属性值</button>

</body>
</html>

在上面的示例中，我们定义了一个名为”getDisplay()”的JavaScript函数，在函数中使用了currentStyle属性来获取元素的display属性值。由于currentStyle属性只在IE浏览器中有效，我们使用了条件运算符（?:）来检查是否支持currentStyle属性，并根据结果选择相应的方式获取display属性值。最后，我们将display属性值输出到控制台。

3. 使用CSS的style属性获取display属性值

除了使用getComputedStyle()方法和currentStyle属性外，我们还可以直接使用元素的style属性来获取display属性值。元素的style属性返回一个对象，该对象包含了所有直接在元素上设置的样式属性。

下面是使用style属性获取display属性值的示例代码：

<!DOCTYPE html>
<html>
<head>
  <script>
    function getDisplay() {
      var element = document.getElementById("element");
      var display = element.style.display;

      console.log(display); // 输出：block
    }
  </script>
</head>
<body>

<div id="element" style="display: block;">Hello World!</div>

<button onclick="getDisplay()">获取display属性值</button>

</body>
</html>

在上面的示例中，我们定义了一个名为”getDisplay()”的JavaScript函数，在函数中使用了style属性来获取元素的display属性值。由于style属性只能获取内联样式（即通过HTML元素的style属性直接设置的样式），我们需要将display属性设置在元素的style属性中。最后，我们将display属性值输出到控制台。

总结

本文介绍了三种使用CSS获取DOM元素的display属性值的方法：getComputedStyle()方法、currentStyle属性和style属性。通过这些方法，我们可以获取元素的display属性值，并根据需要来控制元素的显示和隐藏。在使用getComputedStyle()方法时，需要注意该方法返回的属性值是字符串；在IE8及更低版本中，可以使用currentStyle属性来获取display属性值；使用style属性可以直接获取内联样式的display属性值。

希望本文对你理解CSS如何获取DOM元素的display属性有所帮助！