非jQuery相当于：在JavaScript中可见？ [英] non-jQuery equivalent of :visible in JavaScript?

问题描述

因此，jQuery在DOM上提供了这个非常棒的伪查询'：visible'，不幸的是，它在jQuery和Sizzle（或者你可能使用的任何引擎）的核心中相当紧密。只知道给定元素时，普通JavaScript中有一个很好的等价物吗？

So jQuery provides this awesome pseudo to query in DOM on ':visible', unfortunately, its rather heavily tied into the core of jQuery and Sizzle (or whatever engine you may use). Is there a good equivalent in plain JavaScript when only a given element is known?

关于jQuery的提醒：可见规则：

A reminder on the jQuery :visible rules:

• CSS显示值为none。


• 它们是type =hidden的表单元素。


• 它们的宽度和高度显式设置为0.

隐藏祖先元素，因此元素不显示在页面。

An ancestor element is hidden, so the element is not shown on the page.

注意：只检查给定元素的样式并不总是有效：父项可能会隐藏而不是隐藏所有子项。

Note: checking just style of the given element will not always work: a parent might be hidden instead hiding all children.

推荐答案

您可以从源代码：

jQuery.expr.filters.hidden = function( elem ) {
    var width = elem.offsetWidth,
        height = elem.offsetHeight;

    return ( width === 0 && height === 0 ) ||
           (!jQuery.support.reliableHiddenOffsets &&
           ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
};

• jQuery.css 可以替换为 getComputedStyle （或IE的 .currentStyle ）。


• jQuery.support.reliableHiddenOffsets 是一个变量，用于确定属性是否可靠（IE8 - ）。


• jQuery.css can be replaced with getComputedStyle (or .currentStyle for IE).
• jQuery.support.reliableHiddenOffsets is a variable which determines whether the properties are reliable (IE8-).

这篇关于非jQuery相当于：在JavaScript中可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！