1

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.

Becausedefect
  • 11
  • 2
  • For anyone wondering, I'm using this to call different css when focus is set by the tab key rather than by a mouse click. – Becausedefect Jun 13 '19 at 22:05
  • So you want some CSS to be applied to your element only when it's being focused? Isn't that what :focus is already about? – Félix Paradis Jun 13 '19 at 22:07
  • 1
    Oh I think I misread your question. Yes that's what :focus is for, but I want to CHANGE what's INSIDE the :focus selector using javascript. – Becausedefect Jun 13 '19 at 22:09

1 Answers1

0

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.

JuGGularVein
  • 1
  • 2