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

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

有一些属性似乎是有用的:
当我的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

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