原生javascript方法查询DOM对象是否隐藏

<div class="answer-top" style=" display: none;">
        <a class="question-edit">Edit</a>
        <a class="clear">Clear</a>
        <a class="delete-finding">Delete</a>
</div>

上面代码如果通过原生的方法:document.querySelector('.question-edit').style.display无法查询该DOM对象是否隐藏

类似jquery有方法$('.question-edit').is(':hidden')来查询

原生DOM有方法实现吗,还是需要查找父节点一层层遍历?

补充:
有回答说用document.querySelector('.question-edit').style.display , 我已经写的很明显了,不行的。。单纯想通过使用style样式属性无法判断出来的,包括visibility,所以可以先看下题目的

阅读 9.4k
4 个回答

IE:element.currentStyle
高端:window.getComputedStyle(element)
所以你需要以上两种方式,参考JQ的实现。
图片描述

document.querySelector('.question-edit').style.display查的就是这个元素的这个属性值,display又不具有继承性,给父元素设置display:none,不代表子元素的display的值也被设置了,那么问题是你并没有给一个元素的display赋值,又怎么能查到该节点的display的值是否隐藏?
当然是display:none设置给谁才能用这个属性裁判这个元素是否隐藏.

jQuery( ":hidden" )能查到是因为这个方法设定之一就是在祖先元素是隐藏的,认为元素是不会在页面上显示。
你想用原生的写法,就相当于自己实现一个类似于jQuery的 is(':hidden')方法,可以去看看jQuery源码.或者查询父元素.

function isHidden(el) {
    return (el.offsetParent === null)
}

SO解答

只能一层一层向上查找了,递归调用,最后终止的条件是

document.querySelector('.question-edit').parentNode.parentNode.parentNode.parentNode === document  //true

楼上的方法

var q = document.querySelector('.question-edit');
window.getComputedStyle(q).d  //"none"
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题