js 获取display

在JavaScript中获取元素的display样式属性，可以通过以下几种方式：

一、使用window.getComputedStyle方法（推荐方式）

1. 基础概念
   • window.getComputedStyle是一个可以获取元素所有计算后样式的方法。计算后的样式是元素在浏览器中最终呈现的样式，它考虑了继承、层叠等各种CSS规则的应用结果。

• 示例代码
• 示例代码
• 优势
  • 能准确获取元素当前实际应用的display样式，无论这个样式是直接在元素上定义的，还是通过继承或者CSS规则层叠得到的。
  • 可以获取到所有CSS属性的计算后值，方便进行更全面的样式操作和判断。

二、使用元素的style属性（局限性较大）

1. 基础概念
   • 元素的style属性只能获取内联样式（即直接在HTML标签的style属性中定义的样式）中的display值。

• 示例代码
• 示例代码
• 局限性
  • 如果display样式是通过外部CSS文件或者内部<style>标签定义的，并且不是内联样式，那么通过element.style.display将无法获取到正确的值。

三、应用场景

1. 布局调整
   • 在响应式设计中，可以根据元素的display属性来动态调整布局。例如，当窗口宽度较小时，将某个导航菜单的display从block改为none（隐藏），当点击某个按钮时再将其设置为block或者flex（以合适的布局显示）。

• 元素交互
  • 判断一个可切换显示/隐藏的元素当前的display状态，从而决定下一步的操作。比如一个折叠面板，根据其当前display是block（展开）还是none（折叠）来响应用户的展开/折叠操作请求。