如何无需页面加载，通过JavaScript结合媒体查询逻辑切换背景图？

代码核心问题 #

• 条件逻辑完全错误：第二个else if的判断条件body.offsetWidth > 780 && body.offsetWidth > 580毫无意义——第一个if已经拦截了所有宽度>780的场景，这个分支永远不会被触发。正确的区间应该是580px < 宽度 ≤780px。
• 未定义body变量：直接使用body但未获取对应DOM元素，会触发引用错误。
• 缺少触发机制：仅定义函数但未主动调用或绑定窗口尺寸变化事件，无法自动响应宽度切换背景。

修复后的完整代码 #

// 获取页面body元素
const body = document.body;

const getbg = (bgimg) => {
  const currentWidth = body.offsetWidth;
  if (currentWidth > 780) {
    body.style.backgroundImage = `url(${bgimg[0]})`;
  } else if (currentWidth > 580) { // 自动匹配580<宽度≤780的区间
    body.style.backgroundImage = `url(${bgimg[1]})`;
  } else {
    body.style.backgroundImage = `url(${bgimg[2]})`;
  }
};

// 初始化设置默认背景
getbg(['桌面端背景图地址', '平板端背景图地址', '移动端背景图地址']);

// 监听窗口尺寸变化，实时切换背景
window.addEventListener('resize', () => {
  getbg(['桌面端背景图地址', '平板端背景图地址', '移动端背景图地址']);
});

修复说明 #

1. 补全body元素的DOM获取，消除引用错误。
2. 简化条件判断：第二个分支仅需判断>580，利用else的逻辑自动限定为≤780的区间，逻辑更清晰。
3. 添加初始化调用和窗口resize事件监听，实现无需页面刷新，随窗口尺寸实时切换背景的效果。

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