I would like to get certain css property (for example the border-color) of any elements, but when its on a 'non-base' states, such as focus and hover. For example:
<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>
Using getComputedStyle, I can grab the border color of the input for the 'base' state, but how do I get the border color for when the input is on focus (in this case border-color: green)?
const input = document.querySelector('.input');
input.addEventListener("focus", function() {
console.log(window.getComputedStyle(input).color)
});
Codepen: https://codepen.io/disaladamsas/pen/KKvNZYz?editors=1111