javascript - 如何使用伪类获取元素的样式（例如：focus）

Question

我想获得border-color任何元素的某些 css 属性（例如 ），但是当它处于“非基本”状态时，例如焦点和悬停。例如：

<style>
    .input {
        border: 1px solid red;
    }
    .input:focus {
        outline: none;
        border-color: green;
    }
</style>

<input type="text" class="input">

<script>
    let input = document.querySelector('.input');
    const inputBorderColor = window.getComputedStyle(input).getPropertyValue('border-color');
    console.log(inputBorderColor); // rgb(255, 0, 0)
</script>

使用getComputedStyle，我可以获取“基本”状态的输入边框颜色，但是如何获取输入焦点时的边框颜色（在这种情况下border-color: green）？

Answer 1

const input = document.querySelector('.input');
input.addEventListener("focus", function() {
  console.log(window.getComputedStyle(input).color)
});

代码笔： https ://codepen.io/disaladamsas/pen/KKvNZYz ?editors=1111