搜索

首页  >  问答  >  正文

JavaScript 仅部分替换 CSS 文件

我试图通过使用事件侦听器在白天/夜间主题之间切换,将页面上的 CSS 文件替换为另一个 CSS 文件。我尝试了多种方法,但没有一种能完全奏效。

我的默认主题是深色的,我只能使用我的代码将其更改为浅色主题,而不能再次更改为深色。我究竟做错了什么?非常感谢大家!

1

2

3

4

5

6

7

colorModeBtn.addEventListener("click", function() {

  if (cssFile.href = "styles.css") {

      cssFile.setAttribute("href", "styles-daylight.css")

  } else {

    cssFile.setAttribute("href", "styles.css")

  }

})

1

2

3

4

5

6

7

8

9

colorModeBtn.addEventListener("click", function() {

  if (cssFileDay.disabled = true) {

    cssFileDay.disabled = false

    cssFile.disabled = true

  } else {

    cssFileDay.disabled = true

    cssFile.disabled = false

  }

})

1

2

3

4

5

6

7

8

9

10

11

12

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

2

3

4

5

6

7

8

9

10

11

12

13

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粉322106755357 天前459

全部回复(2)我来回复

  • P粉012875927

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

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

    那是我正在使用的。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    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 语句,例如

    1

    if (x = true)

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

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

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

    回复
    0
  • 取消回复