将“活动”添加到 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