如何判断页面元素是否可见或隐藏？jQuery方法异常排查

别担心英语的问题，咱们一步步来解决这个判断元素可见性的困扰～

首先，你遇到的$(element).is(":hidden")/:visible始终返回false，且display属性显示undefined，大概率是这几个原因：

• 你可能没正确获取到目标元素（比如选择器错误，或者元素还没加载完成）
• 元素的display属性没有被显式设置（不管是inline样式还是CSS），直接取element.style.display会得到undefined或空字符串，但浏览器实际会用默认的计算样式来渲染它

正确的判断方法分两种场景： #

场景1：只关心元素自身的display是否不为none

如果只是想确认元素自身的display属性不是none（不管父元素状态），可以获取元素的计算后样式——这才是浏览器实际渲染时用的样式：

// 原生JS方式
const targetElement = document.querySelector('你的选择器');
if (targetElement) {
  const computedDisplay = window.getComputedStyle(targetElement).display;
  const isNotDisplayNone = computedDisplay !== 'none';
  console.log(isNotDisplayNone); // 结果为true则表示display不是none
}

// jQuery方式结合原生方法
const $element = $('你的选择器');
if ($element.length) {
  const computedDisplay = window.getComputedStyle($element[0]).display;
  const isNotDisplayNone = computedDisplay !== 'none';
  console.log(isNotDisplayNone);
}

场景2：判断元素是否在页面上实际可见

如果要考虑更全面的可见性（比如父元素隐藏、元素尺寸为0等情况），jQuery的:visible选择器其实是靠谱的，但前提是你要确保元素存在：

const $element = $('你的选择器');
// 先检查元素是否存在
if ($element.length) {
  const isVisible = $element.is(":visible");
  console.log(isVisible);
}

这里要注意：如果元素是通过visibility:hidden或opacity:0隐藏的，jQuery会认为它是visible——因为这些属性只是让元素不可见，但它仍然占据页面空间。

额外提醒：为什么display会是undefined？ #

当你直接访问element.style.display时，只能获取到inline样式里设置的display值。如果元素的display是通过外部CSS或浏览器默认样式设置的，element.style.display就会返回undefined或空字符串。这时候必须用window.getComputedStyle()来获取实际生效的样式。

内容的提问来源于stack exchange，提问作者grayhat