Добавление 'active' к кнопке html не применяет стили, упомянутые в псевдо-классе: active

Question

При нажатии кнопки я хочу, чтобы ее цвет был инвертирован.

Ниже перечислены элементы html, вызывающие озабоченность:

    <div class='chatbot-container'>
      <div class='chatbot-wrapper' id='chatbot-wrapper' style="display:none;" >
        <iframe
          id="chatbot"
          class="chatbot"
          allow="microphone;"
          src="https://console.dialogflow.com/api-client/demo/embedded/xxx-xxx-xxx"></iframe>
        </iframe>
      </div>
      <button class='chat-btn' type="button" onclick="toggleChatbot()">Q</button>
    </div>

Итак, вот моя таблица стилей:

.chat-btn {
    background: red;
    color: #fff;
    font-size: 32px;
    ....
    <code snipped for brevity>
    ...
}
.chat-btn:hover {
    background: #fff;
    color: red;
}
.chat-btn:active {
    background: #fff;
    color: red;
}

Ниже мой сценарий:

    <script>
      function toggleChatbot (chatBtn) {
        var x = document.getElementById("chatbot-wrapper");
        if (x.style.display === "none") {
          x.style.display = "block";
          chatBtn.className += ' active';
          console.log(chatBtn.active)
        } else {
          x.style.display = "none";
          chatBtn.className = chatBtn.className.replace(" active", "");
          console.log(chatBtn.active)
        }
      }
    </script>

Итак, если вы посмотрите на снимок ниже, «active» добавляется к классу, как и ожидалось. Но стиль класса псевдо css не применяется. введите описание изображения здесь

Answer 1

Похоже, вы не можете добавить псевдокласс к элементу, используя JS, так как это псевдокласс, а не настоящий. Вы можете просто создать несколько других классов, например chat-btn-hover, которые похожи на псевдоклассы! Эти ссылки могут помочь вам:

https://www.quora.com/Can-I-add-the-hover-pseudo-class-to-an-element-using-JavaScript

Выбор и управление псевдоэлементами CSS, такими как :: before и :: after, используя jQuery