javascript - 如何让这个函数改变样式表

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

1. 您已将 onchange 监听器放置到 span 元素上。 span 元素不会改变。该监听器应该位于复选框上。

2. 您应该更改第二个 <link> 的 href标签，其索引为 1。第二个标签始终覆盖第一个标签。

3. 小事情，但你不需要 else 语句。只需从 if 语句中返回，然后将 else 的逻辑放在 if 语句下即可。

4. 此用例不需要两个链接标记。

5. 正如有人已经评论过的那样，这是一种非常奇怪的切换主题的方式。只需一个样式表，并使用类在 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>