判断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比,也是一行代码,但是更直观,推荐使用这种方法。