如何检测div的display CSS属性，实现指定类名元素显隐状态同步？

两种方式都可以实现该需求，没有强制要求，选择依据主要看你现有项目的技术栈：

• 若项目已经引入了jQuery依赖，可以直接用jQuery写法，代码更简洁
• 若项目没有引入jQuery，优先用原生JavaScript实现，无需额外加载第三方资源，性能更好

原生JavaScript实现示例 #

场景1：已知触发时机（例如点击事件、表单提交后修改了.some-class的显示状态） #

直接在修改状态的逻辑后追加检查代码即可：

// 获取对应DOM元素
const targetEle = document.querySelector('.some-class');
const syncEle = document.querySelector('.some-other-class');

// 检查display属性
if (window.getComputedStyle(targetEle).display === 'none') {
  syncEle.style.display = 'none';
}
// 如需同步恢复显示可以追加else逻辑
// else {
//   syncEle.style.display = 'block';
// }

场景2：未知触发时机，需要自动监听.some-class的显示状态变化 #

使用MutationObserver监听元素属性变化实现自动同步：

const targetEle = document.querySelector('.some-class');
const syncEle = document.querySelector('.some-other-class');

const observer = new MutationObserver(() => {
  if (window.getComputedStyle(targetEle).display === 'none') {
    syncEle.style.display = 'none';
  } else {
    syncEle.style.display = 'block';
  }
});

// 配置监听项：仅监听style和class属性变化，减少不必要的触发
observer.observe(targetEle, {
  attributes: true,
  attributeFilter: ['style', 'class']
});

jQuery实现示例 #

如果项目已引入jQuery，可用更短的代码实现相同逻辑：

if ($('.some-class').css('display') === 'none') {
  $('.some-other-class').css('display', 'none');
}
// 同步恢复的逻辑
// else {
//   $('.some-other-class').css('display', 'block');
// }

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