如何检测元素是否通过jQuery设置display:none？脚本失效求解决方案

问题背景 #

需要编写脚本实现：当元素#thisElement被隐藏时，自动隐藏另一元素。尝试了以下代码但失效，原因是目标元素的display:none是通过JS动态添加的：

if (jQuery('#thisElement').css('display') == 'none') {
// DO SOMETHING 
}

无法使用CSS方案，询问是否可用MutationObserver及其他解决办法。

解决办法 #

1. 用jQuery的:hidden选择器直接判断 #

直接用jQuery内置的:hidden选择器替代css('display')判断，这个方法能可靠识别JS动态添加的display:none，兼容性更好：

if (jQuery('#thisElement').is(':hidden')) {
  jQuery('#targetElement').hide();
}

注意：:hidden不仅能识别display:none，还能处理元素宽高为0、父元素隐藏等多种隐藏场景，比直接读取display属性更全面。

2. MutationObserver实时监听状态变化 #

如果需要持续监听元素的显示/隐藏变化（比如后续有JS动态修改元素状态），MutationObserver是完美选择，它可以监听元素style属性的修改：

// 获取要观察的元素和目标元素
const observedElement = document.getElementById('thisElement');
const targetElement = document.getElementById('targetElement');

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 只处理style属性的变化
    if (mutation.attributeName === 'style') {
      // 同步目标元素的显示状态
      if (jQuery(observedElement).is(':hidden')) {
        jQuery(targetElement).hide();
      } else {
        // 可选：当观察元素显示时，恢复目标元素显示
        jQuery(targetElement).show();
      }
    }
  });
});

// 配置观察规则：监听style属性
observer.observe(observedElement, {
  attributes: true,
  attributeFilter: ['style']
});

// 页面加载时先执行一次初始检查
if (jQuery(observedElement).is(':hidden')) {
  jQuery(targetElement).hide();
}

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