Question

我正在做一个小型项目，该项目将具有明/暗模式切换，但是我正在努力切换标签上的类。

所以我在图标上使用了很棒的字体，这是我的代码：

HTML：

<i class="fas fa-moon" id="toggle"></i>

JS：

    function classToggle() {
        document.getElementById("toggle").classList.toggle('fas fa-moon');
        document.getElementById("toggle").classList.toggle('fas fa-sun');
    }

    document.querySelector('#toggle').addEventListener('click', classToggle);

上面的代码给了我错误：

InvalidCharacterError：该字符串包含无效字符。

对于我也尝试过的JS：

    function classToggle() {
        this.classList.toggle('fas fa-moon');
        this.classList.toggle('fas fa-sun');
    }

    document.querySelector('#toggle').addEventListener('click', classToggle);

但是这也不起作用，并且给了我错误：

TypeError：undefined不是一个对象（正在评估'this.classList.toggle'）

我从https://codepen.io/jacknifey/pen/XWJaKZr那里获得了上面的代码，它可以正常工作，但是一旦我将类名更改为超棒的字体，它便停止工作。也许与SVG有关。如果可以，那么任何人都可以建议其他方法。

保持安全谢谢杰米：）

Answer 1

您无需将fas放入classList.toggle方法中。

function classToggle() {
  document.getElementById("toggle").classList.toggle('fa-moon');
  document.getElementById("toggle").classList.toggle('fa-sun');
}

document.querySelector('#toggle').addEventListener('click', classToggle);

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<i class="fas fa-moon" id="toggle"></i>

如何通过类（纯CSS）切换字体超赞图标

1 个答案: