Javascript 設置按鈕處於活動狀態

Question

我有一個按鈕表，一旦它被填充，我就會使用

document.getElementById("btn0").click();

單擊第一個按鈕。 該按鈕正在做它應該做的事情，但是按鈕的背景顏色並沒有像我手動單擊它時那樣改變。

正如您在運行時所看到的，div 的背景顏色正在發生變化，但按鈕未設置為活動狀態。

代碼片段：

 var myfunc = function(){ document.getElementById("test").style.backgroundColor="red"; }; document.getElementById("btn0").click();

 .btn{ border: none; color: white; width: 100%; padding: 5px 5px 5px 5px; height: 50px; cursor: pointer; font-size: 12px; background-color: #343a40; } .btn:active .btn.active{ background-color:green; outline: none; } .btn:focus{ background-color:green; outline: none; } #test{ background-color: green; width: 600px; height: 400px; }

 <button class="btn" onclick="myfunc()" id="btn0"> Cool button</button> <div id="test"> Hello </div>

這是我創建的 jsfiddle 的鏈接： https ://jsfiddle.net/58hrwcgo/3/

Answer 1

click和focus是有區別的。

click()點擊元素然后不聚焦，不像真正的鼠標點擊，點擊然后聚焦。

我建議通過同時執行以下兩項操作來模擬真正的點擊：

document.getElementById("btn0").click();
document.getElementById("btn0").focus();

Answer 2

js

const btn = document.getElementById("btn0")
var myfunc = function(){
    document.getElementById("test").style.backgroundColor="red";
    btn.focus();
};

btn.click();

css

...

.btn:active, .btn.active{
  background-color:green;
  outline: none;
}

...

Answer 3

手動單擊時，首先觸發焦點狀態。 這就是為什么外觀會根據您的班級.btn:focus發生變化的原因。

document.getElementById("btn0").focus();
document.getElementById("btn0").click();

將導致所需的行為。

此外，您在:active狀態下的 CSS 示例中缺少一個冒號：

.btn:active, .btn.active { ... }

Answer 4

您可以嘗試 HTML DOM focus() 方法。

 document.getElementById("btn0").focus(); 

您可以在此處閱讀有關此內容的更多信息。