当任何父对象在使用 java 脚本的 HTML 页面中不可见时，我如何知道对象不可见？

【问题标题】：How can I know an object is not visible when any of parent object is not visible in an HTML page using java script?当任何父对象在使用 java 脚本的 HTML 页面中不可见时，我如何知道对象不可见？
【发布时间】：2013-01-18 17:25:44
【问题描述】：

假设我在 HTML 页面中有一个文本框，如下所示。

<DIV style = "display:none;">
   <DIV style = "display:inline;">
      <INPUT type = "text" style = "display:inline;">
   </DIV>
</DIV>

在这种情况下，用户将看不到文本框。如何识别该文本当前对用户不可见。

别这么说，我应该到父对象那里看看它们是否设置为不可见。我有一堆字段需要像这样进行验证，这会降低应用程序的性能。

由于该对象对用户不可见，是否还有其他方法可以查明？

提前致谢。

【问题讨论】：

标签： object parent-child visible

【解决方案1】：

如果您不需要它是纯 JavaScript，我建议您使用 jQuery。使用 :visible 或 :hidden 选择器将完成您想要的：

if ( $('yourElement').is(":hidden") ) {
    // The element is not visible
}

http://api.jquery.com/visible-selector/

http://api.jquery.com/hidden-selector/

如果您需要纯 JavaScript 并且不想遍历每个祖先元素，您可以尝试检查元素的 offsetWidth 和 offsetHeight。如果元素因为祖先元素而被隐藏，则它们应该都为0。注意：我一直使用jQuery，所以我不知道这有多可靠。

var yourElement = document.getElementById('yourElementsId');

if ( yourElement.offsetWidth == 0 && yourElement.offsetHeight == 0) {
    // The element is not visible
}

https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth

https://developer.mozilla.org/en-US/docs/DOM/element.offsetHeight

【讨论】：