如何检测GWT元素是否可见

Question

我有几个显示和隐藏的div。如何检测给定元素当前在页面上是否可见？

元素的样式没有帮助，因为它是DOM中被隐藏的父div。

Answer 1

它的偏移高度和宽度都将为0。

UIObject component = ...
boolean isHidden = (component.getOffsetHeight() == 0 && component.getOffsetWidth() == 0);

Answer 2

我以前也遇到过这个问题，我发现以下是最好的解决方案：

给定一个称为"元素"的元素：

boolean visible = UIObject.isVisible(element) && (element.getAbsoluteLeft() > 0) && (element.getAbsoluteTop() > 0);

UIObject上的静态"isVisible"方法将检查display none之类的东西，而AbsoluteLeft和AbsoluteTop上的检查则用于处理分离。我发现后一种检查是必要的，因为如果一个元素与DOM分离（因此在页面上不可见），那么GWT仍然会告诉您它的可见性是true，除非它的可见性明确设置为false。

注意：你可以按照Simon的建议，用偏移宽度和高度检查来代替AbsoluteTop和AbsoluteLeft检查，但在我看来，你也应该包括isVisible检查。

Answer 3

你可以有这样的东西：

  public boolean isVisible(Widget w) {
        while (w.getElement().hasParentElement()) {
           if (w.isVisible()) {
                return true;
            }
            w = w.getParent();
        }
        return w.isVisible();
    }

Answer 4

如果它是一个元素，而不是UIObject，那么以下对我有效：

!"hidden".equals(element.getStyle().getVisibility())
  && !"none".equals(element.getStyle().getDisplay())

我走在树上，所以知道父元素是可见的；如果情况不同，则可能需要对所有父元素执行相同的检查。