javascript - 使用 javascript 在伪元素之后和之前添加样式

Question

我有一个按钮，当用户单击它时它具有以下样式：

.answer-buttons:active {
  -webkit-transform: scale(1.2, 0.8);
  z-index: 1;
}

.answer-buttons:active::before {
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-radius: 0.2em;
  top: -10px;
  border-left-color: cornflowerblue;
}

.answer-buttons:active::after {
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-radius: 0.2em;
  top: -10px;
  border-right-color: cornflowerblue;
}

如您所见，active正在影响按钮及其伪元素after，对吗？before

现在我想在用户按下键盘上的键时激活按钮：

 window.addEventListener('keydown', keyPress);

    function keyPress(e) {
        if(e.keyCode == 37) {
           // code to activate the button shape
           window.removeEventListener('keydown', keyPress);
        }  
    }

after所以我需要一个解决方案来通过 JavaScript 在按钮及其before伪元素上制作上述样式。

如果只有元素，我们可以简单地通过添加一个新类来做到这一点，但是after我before找不到合适的解决方案来完成这项工作？

标签： javascripthtmljquerycss

Answer 1

为此，您可以修改 CSS 以同时使用.active类和:active状态。然后，您可以在按下必要的键时简单地添加/删除类。

let buttons =  document.querySelectorAll('.answer-buttons');
window.addEventListener('keydown', keyPress);
window.addEventListener('keyup', keyUp);

function keyPress(e) {
  if (e.keyCode == 37) // left cursor
   buttons.forEach(el => el.classList.add('active'));
}

function keyUp(e) {
  if (e.keyCode == 37) // left cursor
    buttons.forEach(el => el.classList.remove('active'));
}

.answer-buttons:active,
.answer-buttons.active {
  -webkit-transform: scale(1.2, 0.8);
  z-index: 1;
}

.answer-buttons:active::before,
.answer-buttons.active::before {
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-radius: 0.2em;
  top: -10px;
  border-left-color: cornflowerblue;
}

.answer-buttons:active::after,
.answer-buttons.active::after {
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-radius: 0.2em;
  top: -10px;
  border-right-color: cornflowerblue;
}

<button class="answer-buttons">Foo</button>