js怎么拿到display的值

在JavaScript中获取元素的display属性值有多种方法，主要包括：使用window.getComputedStyle方法、通过元素的style属性来获取内联样式。 首先，我们来讨论最常用的方式之一——使用window.getComputedStyle方法。

window.getComputedStyle方法是一个强大且常用的方法，用于获取元素的所有计算样式，包括display属性的值。它返回一个对象，该对象包含当前元素的所有CSS属性值。以下是如何使用它的示例：

var element = document.getElementById('myElement');
var style = window.getComputedStyle(element);
var displayValue = style.display;
console.log(displayValue);

在上述代码中，我们首先通过document.getElementById方法获取DOM元素，然后使用window.getComputedStyle方法获取该元素的所有计算样式，最后通过style.display来获取display属性的值。这种方法适用于获取任何CSS属性的计算值，即使这些属性没有直接在元素的内联样式中指定。

接下来，我们将详细讨论如何使用window.getComputedStyle方法来获取display属性值，并介绍其他一些可能用到的相关方法。

一、使用window.getComputedStyle方法

1、基本用法

如前所述，window.getComputedStyle方法是获取元素计算样式的标准方法。它不仅能够获取display属性，还能获取其他所有CSS属性的计算值。以下是一个更详细的示例：

var element = document.querySelector('.myClass');
var style = window.getComputedStyle(element);
var displayValue = style.display;
console.log(displayValue); // 可能输出 'block', 'none', 'inline' 等

在这个示例中，我们使用document.querySelector方法获取类名为myClass的元素，然后使用window.getComputedStyle方法获取该元素的计算样式，并输出display属性的值。

2、获取伪元素的样式

window.getComputedStyle方法还可以用于获取伪元素（如:before和:after）的样式。以下是如何获取伪元素样式的示例：

var element = document.querySelector('.myClass');
var style = window.getComputedStyle(element, '::before');
var displayValue = style.display;
console.log(displayValue); // 可能输出 'block', 'none', 'inline' 等

在这个示例中，我们传递了一个伪元素选择器（'::before'）作为window.getComputedStyle方法的第二个参数，从而获取伪元素的计算样式。

二、使用内联样式获取display值

1、内联样式的基本用法

如果你只需要获取元素的内联样式，可以直接访问元素的style属性。需要注意的是，这种方法只能获取通过内联样式直接设置的属性值，而不能获取通过外部样式表或嵌入样式表设置的属性值。以下是示例：

var element = document.getElementById('myElement');
var displayValue = element.style.display;
console.log(displayValue); // 只会输出内联样式设置的值，如 'block' 或 'none'

在这个示例中，我们通过element.style.display直接获取元素的内联display属性值。

2、设置内联样式

除了获取内联样式，你也可以通过style属性来设置元素的内联样式。以下是示例：

var element = document.getElementById('myElement');
element.style.display = 'none'; // 将元素的display属性设置为'none'

在这个示例中，我们通过element.style.display将元素的display属性设置为none，从而隐藏该元素。

三、比较两种方法的优缺点

1、window.getComputedStyle方法的优缺点

优点：

能够获取所有计算样式值，包括通过外部样式表和嵌入样式表设置的样式。
支持伪元素样式的获取。

缺点：

相对于直接访问内联样式，性能稍差一些，因为需要计算所有样式。

2、内联样式获取方法的优缺点

优点：

直接访问内联样式，性能较好。
简单易用。

缺点：

只能获取内联样式，无法获取通过外部样式表或嵌入样式表设置的样式。

四、实际应用场景

1、动态显示和隐藏元素

在实际开发中，常见的场景之一是根据某些条件动态显示或隐藏元素。以下是一个示例：

var element = document.getElementById('myElement');
if (element.style.display === 'none') {
  element.style.display = 'block'; // 显示元素
} else {
  element.style.display = 'none'; // 隐藏元素
}

在这个示例中，我们通过检查元素的display属性值，动态显示或隐藏元素。

2、获取伪元素样式

有时候你可能需要获取伪元素的样式，例如，用于调试或特定的动画效果。以下是一个示例：

var element = document.querySelector('.myClass');
var style = window.getComputedStyle(element, '::after');
var contentValue = style.content;
console.log(contentValue); // 输出伪元素的content属性值

在这个示例中，我们获取了伪元素::after的content属性值。

五、最佳实践

1、使用window.getComputedStyle获取计算样式

在大多数情况下，建议使用window.getComputedStyle方法获取元素的计算样式。它能够确保你获取到的是元素的最终显示样式，而不仅仅是内联样式。

2、直接操作内联样式

如果你只需要操作元素的内联样式，可以直接使用style属性。这种方法简单且性能较好。

3、考虑性能

在需要频繁获取样式的场景中，尽量减少不必要的样式计算操作，以提高性能。例如，可以缓存获取到的样式值，而不是每次都调用window.getComputedStyle方法。

综上所述，使用JavaScript获取元素的display属性值有多种方法，最常用的方法是使用window.getComputedStyle方法，这种方法能够获取元素的所有计算样式值，包括通过外部样式表和嵌入样式表设置的样式。在某些情况下，你也可以直接访问元素的内联样式。根据实际需求选择合适的方法，可以提高开发效率和代码性能。