使用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,说明元素是不可见的

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

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

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

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

也就是说,该属性会去校验当前元素是否设置了displaynone,如果没有,会依次向上查找最近的一层父级元素,直至到根元素,如果有元素设置了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的情况,我们还可以设置visibilityhidden,在这个时候,上面的三种方法都会失效,需要做单独判断,这一点,请大家知晓!

那么对于设置了visibilityhidden的时候,有网友给出了以下解决方案:

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的情况都可以返回正确的结果,但是对于displaynone的情况无效,因此,对于判断元素是否可见,可使用上面的方法进行综合判断,希望本文可以帮助到大家!