如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visiblehidden?


当前回答

您可以使用hidden选择器 :

// Matches all elements that are hidden
$('element:hidden')

还有visible选择器 :

// Matches all elements that are visible
$('element:visible')

其他回答

我会用CSS课.hide { display: none!important; }.

躲藏/展示,我打电话.addClass("hide")/.removeClass("hide")为了检查能见度,我使用.hasClass("hide").

这是一个简单清晰的检查/隐藏/显示元素的方法, 如果你不计划使用.toggle().animate()方法。

由于问题只涉及一个要素,本守则可能更适合:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

twernt的建议,但适用于单一个元素;并且匹配 jQuery FAQ 中推荐的算法.

我们用jQuery的是( )将选中的元素与其它元素、选择器或任何 jQuery 对象一起检查。此方法沿 DOM 元素沿 DOM 元素查找匹配,该匹配符合所传递的参数。如果匹配,则返回为真实,否则返回为虚假。

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // Something
}

因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(截至2004年12月1日jj 查询: 可见选择器- 我们可以检查元素是否真的以这种方式可见:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

如果您想要检查页面上是否可见某个元素, 取决于其父的可见度, 您可以检查是否widthheight本要素的数值均等于0.

jj 查询

$element.width() === 0 && $element.height() === 0

香草香草

element.clientWidth === 0 && element.clientHeight === 0

element.offsetWidth === 0 && element.offsetHeight === 0