如何判断一个节点是否可见

Question

有一个节点,所有的父元素只要有display:none都有可能导致该节点不可见,除了遍历父元素的display,还有什么别的方法来判断当前节点是否可见.

Answer 1

有一些属性似乎是有用的：
当我的html如下：

<div class="box">
      <div>
        <span> 213213132</span>
        <span id="span_test">
          我在这里
        </span>
      </div>
    </div>

或者这样：

<div class="box">
    <span id="span_test">
      我在这里
    </span>
</div>

CSS如下：

.box {
  display: none;
}

js中输出console.dir(document.getElementById("span_test"))时，有以下几个属性是与正常可见状态明显不同的，参考菜鸟中对offsetParent的描述：

节点对象，表示最近的祖先元素，在祖先元素display:none时返回null

应当可以通过offsetParent: null这个值进行一个粗浅的判断，
以及下面这些与offsetParent关联的值均为0时，也比较可疑~，但主要还是offsetParent吧
offsetLeft: 0
offsetTop: 0

希望对你有所帮助，觉得有用的话麻烦动动小手点个采纳啦，多谢