JavaScript 僅部分替換 CSS 文件
P粉322106755
P粉322106755 2024-03-22 09:33:43
0
2
353

我試圖透過使用事件偵聽器在白天/夜間主題之間切換,將頁面上的 CSS 檔案替換為另一個 CSS 檔案。我嘗試了多種方法,但沒有一種能完全奏效。

我的預設主題是深色的,我只能使用我的程式碼將其更改為淺色主題,而不能再次更改為深色。我究竟做錯了什麼?非常感謝大家!

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

P粉322106755
P粉322106755

全部回覆(2)
P粉012875927

我找到了答案,這只是一件小事,就像在這種情況下一樣。但是,我不明白為什麼它不能按照我上面發布的方式工作。

那是我正在使用的。

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)。它開始運作良好。

P粉025632437

堅持住。是的,您發現了錯誤。但是您在問題中顯示的所有四個範例程式碼都有 if 語句,例如

if (x = true)

單一 = 是一個歸因命令,在 JavaScript(和其他 C 派生語言)中,它會傳回一個值,因此 if 語句將始終為 true。

您想要的比較是雙等號(==)。

三等號(===)也是一個比較,但它也比較左右兩邊的資料型態。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!