0

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

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

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

不要这么说，我应该前往父对象以了解它们是否设置为不可见。我有一堆字段要像这样进行验证，这会降低应用程序的性能。

有没有其他方法可以找出这个对象对用户不可见？

提前致谢。

4

1 回答 1

0

如果您不需要它是纯 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

于 2013-01-21T22:37:00.490 回答