如何实现点击按钮切换HTML页面body的两张背景图片？

你的代码里有几个关键错误导致函数失效，逐一修正后即可正常运行：

• 错误1：错误使用element.src判断背景
  body元素没有src属性，背景图是通过style.backgroundImage配置的，不能用src.match来判断当前背景。

• 错误2：JS中CSS属性拼写错误
  JS操作CSS属性需用驼峰命名，backgroundimage要改成backgroundImage。

• 错误3：未定义变量body
  你只定义了element = document.body，但后续调用了body.style，需统一使用element或重新定义body = document.body。

• 错误4：文件名大小写不统一
  HTML里背景图是Day.jpg，JS里写的是day.jpg，系统对文件名大小写敏感时会导致图片加载失败，要保持一致。

修正后的完整代码（直接修改原逻辑）： #

JavaScript：

function night() {
  const body = document.body;
  // 提取当前背景图路径，去除url()和引号的包裹
  const currentBg = body.style.backgroundImage.replace(/url\(['"]?(.*?)['"]?\)/, '$1');
  if (currentBg.includes('night.jfif')) {
    body.style.backgroundImage = "url('image/Day.jpg')";
    console.log("切换为白天模式");
  } else {
    body.style.backgroundImage = "url('image/night.jfif')";
    console.log("切换为夜间模式");
  }
}

HTML：

<body style="background-image:url('image/Day.jpg')">
  <button onclick="night()">切换主题</button>
</body>

更易维护的实现方式（通过CSS类切换）： #

这种方式无需直接操作style属性，后续修改样式只需调整CSS即可：

CSS：

body {
  background-image: url('image/Day.jpg');
}
body.night-mode {
  background-image: url('image/night.jfif');
}

JavaScript：

function night() {
  document.body.classList.toggle('night-mode');
  console.log(document.body.classList.contains('night-mode') ? "夜间模式" : "白天模式");
}

HTML：

<body>
  <button onclick="night()">切换主题</button>
</body>

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