Javascript 是否让所有html控件对用户可见？

如何让所有控件对用户可见

<div id=dataform>
  <div>
    Name
    <input type=text id=name class=entry>
  </div>

  <div>
    City
    <input type=text id=city class=entry style="display:none;">
  </div>

  <div style="display:none;">
    <label for=nocontact>nocontact</label>
    <input type=checkbox id=nocontact class=entry>
  </div>

  <div>
    <table>
      <tr>
        <td>
          <label for=phone>Phone</label>
        </td>
        <td>
          <input type=text id=phone class=entry>
        </td>
      </tr>
    </table>
  </div>

  <div>
    <select id="keys">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
  </div>
</div>

或者其他一些方法来获取所有可见的控件、输入（不仅仅是输入，还包括选择、文本区域等）。可以向每个类添加一个类，如图所示并获取所有类，但如何确定或获取用户可见的类。nocontact复选框不会被选中，所以忽略它。我把表放在那里是为了证明控件并不总是它所在div的直接子级

我担心，在它们之间循环并用类或数据属性标记它们是唯一的方法，这非常糟糕。仅供参考：在这方面不使用jquery或其他框架。

没有“适当”的方法来做到这一点，部分原因是不清楚“可见”一开始应该是什么意思。jQuery（版本3.4.1）是这样的：

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

---

…这对于“可见”的某些定义很好，但它不会检查元素是否将“可见性”设置为“隐藏”，或者是否已从屏幕上滚动；它通常只检查

display:none

（包括父元素）。

只需查询所有元素并过滤掉style.display设置为none的元素，如果这就是您所说的可见。这是否回答了您的问题？与下面的答案类似-将获得控件显示的位置或控件上显式设置的可见性，但将丢失用户看不到的位置，因为未显示父对象。链接到的答案可能没有令人满意的答案，但本质上是同一个问题。还有几个实质上相同的问题。这是否回答了你的问题？我认为，这对于获取视口中的内容是有效的，但是设置可见性：隐藏或显示：无将不起作用，如果其中任何一个设置在父对象上，也将不起作用。@Erick这确实捕获了

显示：无

，包括设置在父对象上。在这种情况下，

offsetWidth

和

offsetHeight

都将是0，这是一个有趣的想法。我要玩它。谢谢。哎呀，这实际上并没有检查元素是否从屏幕上滚动下来；它几乎只检查元素或任何父元素上的

display:none

。我不担心视口内的可见性，但通常在页面上。我正在使用它，它可以工作。：-）

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};