Question

过去我们使用CSS属性“display”来显示和隐藏DOM元素。要检查元素是否可见，我们可以使用：

element.offsetWidth > 0

由于我们在使用Flash和Java Applet时遇到了一些问题（它们在显示时停止：无），我们切换到CSS属性“visibility”。

我现在正在寻找一种快速简便的方法来检查元素是否不可见。

我尝试了以下内容：

检查元素上的属性本身以及所有parent =＆gt;太慢了
直接从浏览器检查计算出的样式（element.currentStyle或window.getComputedStyle（）加上getPropertyValue（样式属性））=＆gt;也太慢了

您是否知道任何其他方式或快捷方式，以查看元素是否可见？

Answer 1

使用JQuery，你可以这样做

var isVisible = $('#foo').is(':visible');

Answer 2

请记住，visibility：hidden会隐藏一个元素，但该元素仍会占用其空间，这可能会对布局产生一些意想不到的后果（如果你意识到这一点，它也可能是一个优势）。

我会使用绝对定位将元素向左移动，在可能的屏幕宽度之外。这会使元素脱离流，因此隐藏元素对布局没有影响，使元素几乎不可见，并且它没有display：none的优势。

.hide {
    position:absolute;
    left:-3000px;
}

然后，要确定元素是否隐藏，您可以使用其offsetLeft属性：

if( myElement.offsetLeft < 0 ){ /* it's hidden */ }

如果您需要确定子元素是否在屏幕外（您不知道它是隐藏元素还是其子元素），您可以使用.offsetParent和while循环，如PPK's Find Position article中所述。

Answer 3

肯特的

Toggling Element Visibility是一种不显眼的，语义上有效的呈现内容的方式，对于非CSS感知的浏览器而言，它会很好地降级。

页面完全加载后，我们将遍历整个文档树，并查找使用类名称切换设置的块级元素。如果我们找到一个说切换关闭的东西，我们会立即隐藏它的下一个兄弟元素，方法是隐藏类名称。
当我们找到一个时，我们会告诉它听鼠标点击。
当我们的一个宠物元素听到咔嗒声时，它会跳跃到行动中，隐藏（或显示）其下一个可用的兄弟，就像我们在初始爬行过程中所做的那样。
所有三个类名（切换，关闭和隐藏）都在init调用的底部输入，并且可以更改为任何有效的类名。

另请查看此DevX article，其中比较了“显示”和“可见性”属性。

Answer 4

检查焦点是否有效，父母是否可见。

var isVisible = true;
try{
    document.getElementById("target").focus();
}catch(err){
    isVisible = false;
}

显然它应该适用于输入或链接，但对于其他元素，我不确定。

我在使用jQuery之前研究过同样的问题，但那次我的目标是focus the first availabe field on a form。结果代码如下：

$(":text:visible:enabled").filter(function(){
    return $(this).parents.filter(function(){
        return this.style.display == "none"; 
    }).size()==0;
}).slice(0,1).focus();

它也适用于隐藏/隐形父母。

Answer 5

CSS选择器经过优化，可以找到匹配元素的集合。有几个库实现了这个功能。 JQuery，ExtJS Core来命名一对。

使用Ext Core，我可以编写一个javascript函数来检查可见性，如下所示：

// Checks whether the element is currently visible using 
//     both visibility and display properties
if(Ext.get(el).isVisible()){
    alert('it\'s visible');
};

请参阅http://extjs.com/products/extcore/docs/?class=Ext.Element了解更多Ext Core Ext.Element功能。

Answer 6

function isVisible(elem) {
  return elem.style.visibility !== "hidden";
}

如何在JavaScript中快速检测元素是否不可见？

6 个答案: