如何替换所有带特定类名的图片以适配明暗模式？

你的代码存在两个明显的语法错误，导致功能无法正常运行：

• darkenclose函数缺少闭合的}，使得lightenclose被嵌套在它内部，外部无法正常调用这个切换亮色图标的函数。
• lightenclose里的boxes变量没有用const/let声明，会隐式创建全局变量，容易引发意外的变量污染问题。

修正后的代码 #

function darkenclose() {
  const boxes = document.querySelectorAll('.svg');
  boxes.forEach(box => {
    box.src = "images/icon/closewin.svg";
  });
}

function lightenclose() {
  const boxes = document.querySelectorAll('.svg');
  boxes.forEach(box => {
    box.src = "images/icon/closewin2.svg";
  });
}

额外检查项 #

• 确认.svg类的元素是<img>标签：只有<img>元素有src属性，如果是原生<svg>标签，需要改用修改innerHTML或替换整个SVG代码的方式。
• 验证图片路径正确性：可以在浏览器控制台输入new URL("images/icon/closewin.svg", window.location.href)，查看实际请求的URL是否指向存在的图片文件。
• 确保函数被正确触发：比如绑定到明暗模式切换的事件上，示例代码如下：

// 监听系统明暗模式变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  e.matches ? darkenclose() : lightenclose();
});

// 页面加载时初始化图片
window.matchMedia('(prefers-color-scheme: dark)').matches ? darkenclose() : lightenclose();

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