CSS：带 Javascript 的焦点选择器

Question

我有许多使用“按钮”标签创建的按钮。当我单击它时，我正在使用：焦点选择器将按钮的颜色从另一种颜色更改为黄色。

现在，我有 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 代码（输入字符以输入）后，如果我尝试单击某个按钮，焦点选择器将不再工作。 是否有一个选项可以使焦点效果在 javascript 代码之后恢复工作，而不使用 javascript 的 onclick 事件？

Answer 1

.style属性优先于来自 CSS 的 styles。

您可以使用 CSS styles 中的!important标志来覆盖它。

 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>

Answer 2

我会为您的 function 添加一个额外的案例：

 case '':
      document.getElementById("One").style = null;
      document.getElementById("Two").style = null;
      break;

这将取消 js 对按钮所做的更改，并返回 CSS 样式，其他所有内容保持原样。 它还可以防止输入字段中有“1”将按钮 1 的颜色更改为黄色，并且您手动关注按钮 2 并将其颜色更改为黄色的情况。 1