如何在JavaScript中检查div是display:none还是block

有时候我们需要在JavaScript中检查一个div元素是display:none还是display:block，以便于根据需要进行相应的操作。下面介绍在JavaScript中实现该功能的两种方法。

方法一：使用getComputedStyle()

使用getComputedStyle()方法可以获取元素的所有计算样式，包括display属性。我们可以通过判断display属性的值来确定元素是display:none还是display:block。

代码实现：

// 假设我们要检查的元素id是myDiv
let myDiv = document.getElementById('myDiv');

// 获取计算样式
let computedStyle = window.getComputedStyle(myDiv);

// 检查display属性值
if (computedStyle.display === 'none') {
  // 元素是display:none
} else {
  // 元素是display:block
}

方法二：使用元素的style属性

另一种检查元素display属性的方法是直接使用元素的style属性。如果元素的display属性值是none，那么该属性值为空字符串；如果display属性值是block，那么该属性值是字符串block。

代码实现：

// 假设我们要检查的元素id是myDiv
let myDiv = document.getElementById('myDiv');

// 获取style属性值
let displayValue = myDiv.style.display;

// 检查display属性值
if (displayValue === 'none') {
  // 元素是display:none
} else {
  // 元素是display:block
}

以上两种方法都可以实现检查元素的display属性值，可以根据实际需求选择使用。