jquery判断元素是否显示

检查元素是否可见

使用 :visible 选择器可以快速判断元素是否显示。该方法会检查元素的 CSS display 属性是否为 none，以及宽度和高度是否大于 0。

if ($('#element').is(':visible')) {
    // 元素可见时的操作
} else {
    // 元素隐藏时的操作
}

检查元素是否隐藏

使用 :hidden 选择器可以判断元素是否隐藏。与 :visible 相反，该方法检查元素的 CSS display 属性是否为 none，或者宽度和高度是否为 0。

if ($('#element').is(':hidden')) {
    // 元素隐藏时的操作
} else {
    // 元素可见时的操作
}

直接检查 CSS 属性

通过检查元素的 display 或 visibility 属性，可以更精确地判断元素的显示状态。

if ($('#element').css('display') !== 'none') {
    // 元素可见时的操作
}

if ($('#element').css('visibility') !== 'hidden') {
    // 元素未被隐藏时的操作
}

检查元素的宽度和高度

某些情况下，元素可能因为宽度或高度为 0 而被视为不可见。可以通过检查这些属性进一步确认。

if ($('#element').width() > 0 && $('#element').height() > 0) {
    // 元素有实际尺寸时的操作
}

综合判断方法

结合以上方法，可以更全面地判断元素的可见性。

function isElementVisible(element) {
    return $(element).is(':visible') && 
           $(element).css('visibility') !== 'hidden' && 
           $(element).width() > 0 && 
           $(element').height() > 0;
}

注意事项

• :visible 和 :hidden 选择器会考虑父元素的可见性。如果父元素隐藏，子元素即使设置为可见也会被判定为隐藏。
• 某些 CSS 属性如 opacity: 0 不会影响 :visible 的判断，元素仍会被视为可见。
• 动画或过渡效果可能会暂时改变元素的可见性状态，需根据实际需求调整判断逻辑。