單擊按鈕時，我希望其顏色反轉。以下是關注的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 類樣式。