如何根据指定元素可见性动态切换对应CSS规则的生效状态

你可以根据兼容性需求选择以下两种方案：

方案1：纯CSS实现（优先推荐，代码量最少） #

借助CSS :has() 伪类直接检测.text5的显隐状态，只有当.text5可见时才应用你写的响应式规则：

@media screen and (max-width: 820px) {
  /* 若外部JS通过类名控制显隐（比如加hidden类），用这个选择器 */
  .topbar:has(.text5:not(.hidden)) nav.container {
    flex-grow: 3;
  }
  /* 若外部JS直接修改内联style控制display:none，用这个选择器 */
  /*
  .topbar:has(.text5:not([style*="display: none"])) nav.container {
    flex-grow: 3;
  }
  */
}

• 兼容性说明：Chrome 105+、Firefox 121+、Safari 15.4+均原生支持，不需要额外写JS。

方案2：JS动态控制（全版本兼容） #

如果需要兼容老旧浏览器，通过JS监听.text5的状态动态切换CSS规则的生效状态：

1. 首先修改原有CSS规则，加专属类作为开关：

@media screen and (max-width: 820px) {
  /* 只有body带enable-flex-grow类时规则才生效 */
  body.enable-flex-grow nav.container {
    flex-grow: 3;
  }
}

2. 加入JS代码检测状态+监听变化：

const text5El = document.querySelector('.text5');
// 更新规则开关状态
const toggleFlexRule = () => {
  const isText5Visible = getComputedStyle(text5El).display !== 'none';
  document.body.classList.toggle('enable-flex-grow', isText5Visible);
};
// 页面加载时初始化一次
toggleFlexRule();
// 监听.text5的属性变化，应对外部JS修改它的显隐状态
const observer = new MutationObserver(toggleFlexRule);
observer.observe(text5El, {
  attributes: true,
  attributeFilter: ['style', 'class'] // 只监听和显隐相关的属性，降低性能消耗
});
// 可选：如果需要窗口大小变化时同步更新，加入这行
window.addEventListener('resize', toggleFlexRule);

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