使用JavaScript切换CSS日夜主题仅生效一半问题排查

我尝试通过事件监听器切换日夜主题（默认深色），替换页面CSS文件，但多种实现均仅能切换至浅色，无法切回深色，求问题原因及解决办法。以下是尝试的代码：

问题代码分析 #

代码1：切换单个link的href #

colorModeBtn.addEventListener("click", function() {
  if (cssFile.href = "styles.css") {
      cssFile.setAttribute("href", "styles-daylight.css") 
  } else {
    cssFile.setAttribute("href", "styles.css")
  }
})

• 核心错误：if判断中使用赋值运算符=而非比较运算符===，导致每次点击都会执行if分支，永远只能切换到浅色主题。
• 次要问题：cssFile.href返回的是完整URL（如http://xxx.com/styles.css），直接和相对路径"styles.css"比较永远不成立，即使改成===也无法正确判断。

代码2：切换两个link的disabled状态 #

colorModeBtn.addEventListener("click", function() {
  if (cssFileDay.disabled = true) {
    cssFileDay.disabled = false
    cssFile.disabled = true
  } else {
    cssFileDay.disabled = true
    cssFile.disabled = false
  }
})

• 核心错误：同样使用了赋值运算符=而非比较运算符===，导致if条件永远为true，只会执行启用浅色主题的逻辑，无法触发切回深色的分支。

代码3：动态添加/移除link标签 #

colorModeBtn.addEventListener("click", function() {
  const cssLink = document.createElement("link")
  if (cssFile.href = "styles.css") {
    cssLink.rel = "stylesheet"
    cssLink.href = "styles-daylight.css"
    document.head.appendChild(cssLink)
    cssFile.disabled = true
  } else if (document.head.cssLink) {
    document.head.removeChild(cssLink)
    cssFile.disabled = false
  }
})

• 错误1：if判断仍使用赋值运算符=，逻辑永远走if分支。
• 错误2：document.head.cssLink不是合法属性，无法找到之前添加的浅色主题link标签；且cssLink是每次点击创建的新变量，和之前添加到页面的元素无关，无法移除。

代码4：动态添加+查询移除link标签 #

colorModeBtn.addEventListener("click", function() {
  const cssLink = document.createElement("link")
  if (cssFile.href = "styles.css") {
    cssLink.rel = "stylesheet"
    cssLink.href = "styles-daylight.css"
    document.head.appendChild(cssLink)
    cssFile.disabled = true
  } else if (document.head.cssLink) {
    var linkNode = document.querySelector('link[href*="styles-daylight.css"]')
    linkNode.removeChild(linkNode)
    cssFile.disabled = false
  }
})

• 错误1：if判断的赋值运算符问题依旧存在。
• 错误2：linkNode.removeChild(linkNode)语法错误，应该调用父元素的removeChild方法，即linkNode.parentNode.removeChild(linkNode)。
• 错误3：document.head.cssLink判断无效，无法触发移除逻辑。

正确实现方案 #

方案1：切换单个link的href（处理URL匹配） #

colorModeBtn.addEventListener("click", function() {
  // 用endsWith判断文件名，兼容完整URL
  if (cssFile.href.endsWith("styles.css")) {
    cssFile.setAttribute("href", "styles-daylight.css");
  } else {
    cssFile.setAttribute("href", "styles.css");
  }
});

方案2：切换两个link的disabled状态（更稳定） #

先在页面中定义两个主题的link标签：

<link rel="stylesheet" href="styles.css" id="darkTheme">
<link rel="stylesheet" href="styles-daylight.css" id="lightTheme" disabled>

然后编写切换逻辑：

const darkTheme = document.getElementById('darkTheme');
const lightTheme = document.getElementById('lightTheme');

colorModeBtn.addEventListener("click", function() {
  // 用===比较disabled状态
  if (lightTheme.disabled === true) {
    lightTheme.disabled = false;
    darkTheme.disabled = true;
  } else {
    lightTheme.disabled = true;
    darkTheme.disabled = false;
  }
});

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