判断HTML元素在页面中是否显示

2023-02-10大约4分钟

假设我们现在判断页面上的一个button是否显示，在下面代码中，这个DOM元素在代码中的变量名是btn。

常见的判断方法是依赖jquery, 但是这里我们尽量用原生的代码，避免引入不必要的依赖。

判断style.display属性

直观上来说，元素是否显示，都是用CSS来控制的，因此可以用如下的代码：

if (btn.style.display !== 'none') {
  // 做具体的事情
}

但是呢，有时候事与愿违，当我们的HTML用的是内联样式的时候，这种方法行得通；否则，就不行了。

下面的代码，用上面的方式行得通：

<button style="display: none">lema.fun</button>

下面的代码，用上面的方式行不通：

<style>
  button {
    display: none;
  }
</style>
<button>lema.fun</button>

原因是，btn.style指的是button的style属性，当我们不用内联样式的时候，自然就获得不到样式了。

使用checkVisibility()方法

这是DOM元素对象上的一个内置方法，因此用起来更便利：

if (btn.checkVisibility()) { // 返回true，则说明元素可见
  // 做具体的事情
}

这个方法无论样式是内联的，还是在外部的CSS的，都是通用的。和使用jquery比，也是一行代码，但是更直观，推荐使用这种方法。

HTML