Changing focus css with javascript

Question

I apologize if this is a duplicate question, but all my search results are either about .focus() in js or about :focus in css.

All I want to know is how to change the css within :focus using javascript. Something like:

#input:focus{ color: red; }

function changeFocus(){ document.getElementById("input").[focusCss].color = "green"; }

I understand that I could change the color with a focus listener and then change it back on blur, but that seems like an excessive amount of code for something so simple, especially when it's already being used inside other event listeners.

Answer 1

You can try this out instead:

object.addEventListener("focus", myScript);

Replace myScript with your function and it should run whenever you hover over the object.