如何获取元素在:focus等伪类状态下的CSS属性值

getComputedStyle 本身支持传入第二个参数指定伪类选择器，可以直接读取对应状态的样式，不需要实际触发元素状态，是最优的实现方案。

方法1：传入伪类参数直接读取（无页面侵入） #

直接在调用getComputedStyle时，第二个参数传入目标伪类（:focus、:hover等）即可：

<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 focusBorderColor = window.getComputedStyle(input, ':focus').getPropertyValue('border-color');
    console.log(focusBorderColor); // 输出 rgb(0, 128, 0) 即目标绿色值
</script>

该方法也支持:hover、:active、:visited等所有标准CSS伪类的样式读取，不会实际触发元素的状态变化，不会影响页面当前交互。

方法2：手动触发状态后读取（真实触发交互） #

如果需要读取真实交互触发后的最终样式（比如存在JS动态修改样式的场景），可以先手动触发对应状态再读取：

let input = document.querySelector('.input');
// 手动触发focus状态
input.focus();
const focusBorderColor = window.getComputedStyle(input).getPropertyValue('border-color');
console.log(focusBorderColor); // 输出 rgb(0, 128, 0)
// 可选：读取完成后还原状态
input.blur();

注意：如果目标伪类没有对应的样式规则，读取到的结果会和元素默认状态的属性值一致。

内容的提问来源于stack exchange，提问作者Ahmad ikram