使用js判断元素是否可见

发表于 更新于 分类于

  在日常的开发里面，我们会经常遇到需要判断一个元素是否显示的情况，相信大家对于这样的情形已经司空见惯了，几乎可以随手拈来，不在话下，那么本文我们就来跟大家分享一下常用的一些在JavaScript中判断元素是否显示的几种方法。

首先我们先写个html结构，如下：

1
2
3
<div class="wrapper">
    <input id="userName" type="text" value=""/>
</div>

接下来我们设置输入框为隐藏

1
.wrapper input {display:none}

现在，我们来看一下怎么判断我们的输入框现在是否可见呢

第一种方法：通过获取元素display属性来实现

在JavaScript中，我们可以通过对元素的display属性值做判断，只要判断是否为none即可；因为元素分为 块级、行内元素，且显示元素的display属性值有多种不确定性。 如：

1
2
3
4
5
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}
console.log(isHidden(document.getElementById('userName')))  // 输出为true

可以看到，已经达到了我们想要的效果，这也是我们经常会用到的方法

第二种方法：使用jQuery的.is(“:hidden”)

1
2
const isHidden = $('#userName').is(':hidden')
// 这里我们可以得到结果为true，说明元素是不可见的

上面两种方法都是基于当前元素设置了diaplay为none的情况，那么如果我们当前元素也就是我们的输入框不做设置，而是把他的父级元素设置为none，这时候，再来判断我们的输入框是否可见，那么，第一种方法的验证就会失败，第二种基于jQuery的验证会正确的返回为true得到正确的结果，那么有没有不基于第三方库，而是使用原生的JavaScript来达到我们想要的效果呢，接下来，我们来看第三种方法：

第三种方法: 判断当前元素的父元素的offsetParent属性

对于元素的offsetParent属性,MDN的解释为：

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的table, table cell 或根元素（标准模式下为html；quirks 模式下为 body）。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

也就是说，该属性会去校验当前元素是否设置了display为none，如果没有，会依次向上查找最近的一层父级元素，直至到根元素，如果有元素设置了none的属性，则offsetParent 会返回 null，如下：

现在，我们设置输入框的父级元素为不可见.wrapper {display:none}

1
2
3
4
5
function isHidden(el) {
    return (el.offsetParent === null);
}
console.log(isHidden(document.getElementById('userName')))  // 输出为true
console.log(isHidden(document.querySelector('.wrapper')))   // 输出为true

当前元素和父元素都输出了我们预想中的结果，但是这种方法需要注意一个边界情况，如果当前元素也就是输入框不做任何设置，他的父元素设置为.wrapper {position:fixed;},也就是设置了position属性为fixed，这时，offsetParent也会返回null，所以大家在使用的时候要稍加注意。

上面三种方法都完成了我们对于校验元素是否可见的功能，但是对于元素是否可见，我们除了可以设置元素的display属性为none的情况，我们还可以设置visibility为hidden，在这个时候，上面的三种方法都会失效，需要做单独判断，这一点，请大家知晓！

那么对于设置了visibility为hidden的时候，有网友给出了以下解决方案：

1
2
3
4
5
6
7
8
9
function isVisible (ele) {
    var style = window.getComputedStyle(ele);
    return  style.width !== 0 &&
            style.height !== 0 &&
            style.opacity !== 0 &&
            style.display!=='none' &&
            style.visibility!== 'hidden';
}
// true为显示，false为隐藏

经测试，该方法对于当前元素以及父元素设置为visibility属性值为hidden的情况都可以返回正确的结果，但是对于display为none的情况无效，因此，对于判断元素是否可见，可使用上面的方法进行综合判断，希望本文可以帮助到大家！