JavaScript ne remplace que partiellement les fichiers CSS

Question

J'essaie de remplacer un fichier CSS sur la page par un autre fichier CSS en utilisant un écouteur d'événement pour basculer entre les thèmes jour/nuit. J'ai essayé différentes méthodes mais aucune n'a vraiment fonctionné.

Mon thème par défaut est sombre et je ne peux le changer qu'en thème clair en utilisant mon code, mais pas encore en thème sombre. Qu'ai-je fait de mal? Merci à tous!

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

J'ai trouvé la réponse, c'est juste une petite chose, comme dans ce cas. Cependant, je ne comprends pas pourquoi cela ne fonctionne pas comme je l'ai indiqué ci-dessus.

C’est ce que j’utilise.

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

J'ai dû changer (cssFileDay.disabled = true) en (cssFileDay.disabled === true) ou (cssFileDay.disabled). Cela a commencé à bien fonctionner.

Answer 2

Attendez-vous. Oui, vous avez trouvé l'erreur. Mais les quatre exemples de codes que vous avez montrés dans votre question contiennent des déclarations if comme

if (x = true)

Un seul = est une commande d'attribution qui, en JavaScript (et dans d'autres langages dérivés du C), renvoie une valeur, donc l'instruction = 是一个归因命令，在 JavaScript（和其他 C 派生语言）中，它返回一个值，因此 if sera toujours vraie.

La comparaison que vous souhaitez est le double signe égal (==).

Le

triple signe égal (===) est également une comparaison, mais il compare également les types de données sur les côtés gauche et droit.