Как переключить шрифт с помощью классного значка шрифта (pure CSS) - PullRequest
Новая
       38

Как переключить шрифт с помощью классного значка шрифта (pure CSS)

1 голос
/ 05 апреля 2020

Я работаю над небольшим проектом, в котором будет переключаться режим светлого / темного, но я пытаюсь переключить класс в теге.

Так что я использую шрифт потрясающий для значки вот мой код:

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. Если так, то кто-нибудь может предложить альтернативный метод.

Будьте в безопасности, спасибо, Jam ie:)

1 Ответ

1 голос
/ 05 апреля 2020

Вам не нужно помещать 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>
...