嵌套条件语句有效，组合条件语句无效——JavaScript技术疑问

嘿，这个问题我碰到过类似的情况，咱们一步步来拆解原因，找到解决办法！

首先，先明确一下你提到的两种写法的差异——嵌套条件能生效，但组合条件不行，大概率是细节上的逻辑不一致或者代码执行时机/元素获取的问题，下面是最常见的几个原因和排查方向：

1. 组合条件里遗漏了SVG元素存在的判断 #

假设你的嵌套条件写法大概是这样（生效的）：

if (window.location.pathname.includes('page1')) {
  if (window.innerWidth >= 1920) {
    const svg = document.querySelector('svg');
    // 嵌套里可能加了元素存在的判断
    if (svg) {
      svg.setAttribute('viewBox', '0 0 1920 1080');
    }
  }
}

而组合条件的写法可能漏掉了if (svg)的判断：

// 不生效的组合写法（遗漏元素检查）
if (window.location.pathname.includes('page1') && window.innerWidth >= 1920) {
  const svg = document.querySelector('svg');
  // 直接操作svg，如果此时SVG还没加载完成，会抛出错误中断代码
  svg.setAttribute('viewBox', '0 0 1920 1080');
}

这种情况下，当页面刚加载时SVG还没渲染完成，querySelector('svg')会返回null，直接调用setAttribute会报错，导致整个代码块“看起来没生效”，但实际上是代码执行出错了。

2. 组合条件的判断逻辑和嵌套不一致 #

比如嵌套里用的是window.location.href.includes('page1')（匹配整个URL），但组合条件里写成了window.location.pathname === '/page1'（严格匹配路径），如果你的page1实际路径是/page1/（带斜杠），那严格等于的判断就会不成立，导致组合条件不触发。

一定要确保组合条件里的两个判断和嵌套时完全一致，比如都用includes('page1')或者都用严格匹配的路径。

3. 代码执行时机不对 #

如果你的代码是放在<head>标签里，或者DOM还没加载完成就执行了，那不管是嵌套还是组合条件，都可能获取不到SVG元素。但嵌套条件可能因为某些原因（比如页面渲染顺序）在后续触发时刚好能获取到，而组合条件只执行一次就错过了时机。

解决办法是把代码放在DOMContentLoaded事件监听里，确保DOM完全加载后再执行：

document.addEventListener('DOMContentLoaded', () => {
  // 这里写你的组合条件代码
  if (window.location.pathname.includes('page1') && window.innerWidth >= 1920) {
    const svg = document.querySelector('svg');
    if (svg) {
      svg.setAttribute('viewBox', '0 0 1920 1080');
    }
  }

  // 额外：如果需要支持窗口 resize 时动态调整，还要加resize监听
  window.addEventListener('resize', () => {
    const svg = document.querySelector('svg');
    if (!svg) return;

    if (window.location.pathname.includes('page1') && window.innerWidth >= 1920) {
      svg.setAttribute('viewBox', '0 0 1920 1080');
    } else {
      // 记得恢复默认的viewBox，避免窗口缩小后还是大屏配置
      svg.setAttribute('viewBox', '0 0 原默认宽度 原默认高度');
    }
  });
});

快速排查小技巧 #

你可以在组合条件的代码里加个console.log，看看条件是否真的触发了：

if (window.location.pathname.includes('page1') && window.innerWidth >= 1920) {
  console.log('组合条件触发了！'); // 看看控制台有没有这个输出
  const svg = document.querySelector('svg');
  console.log('获取到的SVG元素：', svg); // 看看是不是null
  if (svg) {
    svg.setAttribute('viewBox', '0 0 1920 1080');
  }
}

如果控制台输出了组合条件触发了！但svg是null，那就是元素获取时机的问题；如果连条件触发的日志都没有，那就是条件判断的逻辑有问题。

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