CSS : 带有 Javascript 的焦点选择器答案

【问题标题】：CSS :focus Selector with JavascriptCSS : 带有 Javascript 的焦点选择器
【发布时间】：2022-01-13 20:14:02
【问题描述】：

我有许多使用“按钮”标签创建的按钮。当我单击它时，我正在使用 :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>

当我首先单击按钮时，:focus 正在工作。我的问题是，在使用输入（输入字符输入）运行 javascript 代码后，如果我尝试单击某个按钮，则 :focus 选择器不再工作。是否有一个选项可以使 :focus 效果在该 javascript 代码之后恢复工作，而不使用 javascript 的 onclick 事件？

【问题讨论】：

明确添加到 .style 属性的样式优先于 CSS 中的样式。

标签： javascript css css-selectors

【解决方案1】：

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

您可以在 CSS 样式中使用 !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>

【讨论】：

Thx！关于它的另一个小问题，如果你能回答：选择器能以某种方式禁用 javascript 中某些函数的结果吗？例如：焦点选择器禁用 coloringButton() 结果，所以当我按下按钮时其他按钮更改为默认样式。
否，但该函数可以检查document.activeElement 以确定哪个元素被聚焦，并相应地改变它的作用。

【解决方案2】：

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

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

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

【讨论】：