搜索

首页  >  问答  >  正文

JavaScript 仅部分替换 CSS 文件

我试图通过使用事件侦听器在白天/夜间主题之间切换,将页面上的 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粉322106755P粉322106755276 天前393

全部回复(2)我来回复

  • P粉012875927

    P粉0128759272024-03-23 09:07:11

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

    那是我正在使用的。

    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)。它开始运作良好。

    回复
    0
  • P粉025632437

    P粉0256324372024-03-23 00:40:22

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

    if (x = true)

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

    您想要的比较是双等号(==)。

    三等号(===)也是一个比较,但它也比较左右两侧的数据类型。

    回复
    0
  • 取消回复