我有許多使用“button”標簽創建的按鈕。當我點擊它時，我正在使用 :focus Selector 將按鈕的顏色從另一種顏色更改為黃色。
現在，我有 Javascript 代碼可以做同樣的事情（改變按鈕的背景顏色），唯一的區別是它連接到輸入。
這是示例：
function coloringButton() {
let myInput = document.getElementById("numbers");
let lastChar = myInput.value.slice(-1);
switch (lastChar) {
case '1':
document.getElementById("Two").style.backgroundColor = 'gray';
document.getElementById("One").style.backgroundColor = 'yellow';
break;
case '2':
document.getElementById("One").style.backgroundColor = 'gray';
document.getElementById("Two").style.backgroundColor = 'yellow';
break;
}
}#One,
#Two {
background-color: gray;
}
#One:focus,
#Two:focus {
background-color: yellow;
}<input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'>
<button type="button" id='One'>
<span>1</span>
</button>
<button type="button" id='Two'>
<span>2</span>
</button>當我首先單擊按鈕時，：焦點正在作業。我的問題是，在運行帶有輸入的 javascript 代碼（輸入字符以輸入）后，如果我嘗試單擊某個按鈕，則 :focus 選擇器將不再作業。是否有一個選項可以使 :focus 效果在該 javascript 代碼之后恢復作業，而無需將 onclick 事件與 javascript 一起使用？
uj5u.com熱心網友回復：
該.style屬性優先于來自 CSS 的樣式。
您可以使用!importantCSS 樣式中的標志來覆寫它。
function coloringButton() {
let myInput = document.getElementById("numbers");
let lastChar = myInput.value.slice(-1);
switch (lastChar) {
case '1':
document.getElementById("Two").style.backgroundColor = 'gray';
document.getElementById("One").style.backgroundColor = 'yellow';
break;
case '2':
document.getElementById("One").style.backgroundColor = 'gray';
document.getElementById("Two").style.backgroundColor = 'yellow';
break;
}
}#One {
background-color: gray;
}
#One:focus {
background-color: yellow !important;
}
#Two {
background-color: gray;
}
#Two:focus {
background-color: yellow !important;
}<input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'>
<button type="button" id='One'>
<span>1</span>
</button>
<button type="button" id='Two'>
<span>2</span>
</button>uj5u.com熱心網友回復：
我會為您的功能添加一個額外的案例：
case '':
document.getElementById("One").style = null;
document.getElementById("Two").style = null;
break;
這將取消 js 對按鈕所做的更改并回傳 CSS 樣式，保留其他所有內容。它還可以防止輸入欄位中的“1”將按鈕 1 的顏色更改為黃色，并且您手動關注按鈕 2 的情況也將其顏色更改為黃色。1
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377815.html
標籤：javascript css css-选择器