Me gustaría obtener cierta propiedad css (por ejemplo, el border-color ) de cualquier elemento, pero cuando está en un estado 'no base', como el enfoque y el desplazamiento. Por ejemplo:
<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> Usando getComputedStyle , puedo tomar el color del borde de la entrada para el estado 'base', pero ¿cómo obtengo el color del borde cuando la entrada está enfocada (en este caso 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