JavaScript ersetzt CSS-Dateien nur teilweise

Question

Ich versuche, eine CSS-Datei auf der Seite durch eine andere CSS-Datei zu ersetzen, indem ich einen Ereignis-Listener verwende, um zwischen Tag-/Nachtthemen zu wechseln. Ich habe verschiedene Methoden ausprobiert, aber keine davon hat wirklich funktioniert.

Mein Standardthema ist dunkel und ich kann es mit meinem Code nur in ein helles Thema ändern, aber nicht wieder in dunkel. Was habe ich falsch gemacht? Danke euch allen!

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

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

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
  }
})

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
  }
})

Answer 1

我找到了答案，这只是一件小事，就像在这种情况下一样。但是，我不明白为什么它不能按照我上面发布的方式工作。

那是我正在使用的。

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

我必须将 (cssFileDay.disabled = true) 更改为 (cssFileDay.disabled === true) 或 (cssFileDay.disabled)。它开始运作良好。

Answer 2

坚持住。是的，您发现了错误。但是您在问题中显示的所有四个示例代码都有 if 语句，例如

if (x = true)

单个 = 是一个归因命令，在 JavaScript（和其他 C 派生语言）中，它返回一个值，因此 if 语句将始终为 true。

您想要的比较是双等号（==）。

三等号（===）也是一个比较，但它也比较左右两侧的数据类型。