如何获得此功能以更改样式表

Question

我是 jS 的新手，正在尝试一些简单的任务，但即使是这些所谓的简单任务有时也被证明是困难的。请帮助我理解为什么这不起作用。此代码段是通过使用切换来更改样式表。你可能会锻炼。

我有两个样式表，一个切换（复选框）和一个带有 if else 语句的函数。为什么我不能让它工作？谢谢

function toggleTheme() {

  let theme = document.getElementsByTagName('link')[0];

  if (theme.getAttribute('href') == 'darkstyle.css') {
    theme.setAttribute('href', 'lightstyle.css');
  } else {
    theme.setAttribute('href', 'darkstyle.css');
  }
}

<link rel="stylesheet" href="darkstyle.css" />

<link rel="stylesheet" href="lightstyle.css" />

<label class="switch">
  <input  type="checkbox" />
  <span onchange="toggleTheme()" class="slider round"></span>
</label>

Answer 1

您已将 onchange 侦听器置于 span 元素上。 span 元素不会改变。这个侦听器应该在复选框上。
您应该更改第二个 <link> 标签的 href，它的索引为 1。第二个总是覆盖第一个。
小东西，但您不需要 else 语句。只需 return 从您的 if 语句中取出，然后将您的 else 逻辑放在 if 语句下。
此用例不需要两个 link 标签。
正如有人评论的那样，这是一种切换主题的非常奇怪的方式。只需一个样式表，并使用 class.
在 body 标签上切换主题

<link rel="stylesheet" href="lightstyle.css" />

<label class="switch">
    <input onchange="toggleTheme()" type="checkbox" />
    <span class="slider round"></span>
</label>

<script>
    function toggleTheme() {
        let theme = document.getElementsByTagName('link')[0];

        if (theme.getAttribute('href') === 'darkstyle.css') {
            return theme.setAttribute('href', 'lightstyle.css');
        }
        theme.setAttribute('href', 'darkstyle.css');
    }
</script>

Answer 2

如果您有兴趣，还有一个选择：

<link type="text/css" rel="stylesheet" class="theme light" href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Z3JheSB9"> <!--- Replace url with lightsyle.css --->
<link type="text/css" rel="stylesheet" class="theme dark" href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGJsYWNrIH0=" disabled> <!--- Replace url with darkstyle.css --->

<label class="switch">
    <input onchange="toggleTheme()" type="checkbox" />
    <span class="slider round"></span>
</label>

<script>
    function toggleTheme() {
        for (let style of document.querySelectorAll('link.theme') /* make sure that only theme styles are toggled */) {
            style.disabled = !style.disabled; //This will disable/enable the styles
        }
    }
</script>

如何获得此功能以更改样式表

How to get this function to change style sheets

javascript

frontend

onchange