将“活动”添加到 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>因此，如果您查看下面的快照，则会按预期将“活动”附加到类中。但是没有应用 css psuedo 类样式。

Answer 1

似乎您无法使用 JS 向元素添加伪类，因为它是伪类而不是真实类。您可以创建一些其他类chat-btn-hover，例如类似于伪类！此链接可以帮助您：

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

使用 jQuery 选择和操作 CSS 伪元素，例如 ::before 和 ::after