Question

I have a div and when I mouse over it I want to change the background (and possibly other properties). I can do it by calling el.style.backcolor = "", but is there a way I can add another CSS style to it then remove it later? Like style += mouseOverStyle and then style -= mouseOverStyle. That way I could select the properties to change in the CSS instead of in the JavaScript code.

EDIT: I may want to apply the new style in other situations, not just mouseover, so #div:hover isn’t really a general solution. What I’m really asking is is there something like style.add(“style”) and style.remove(“style”)?

Answer 1

Add or remove CSS classes when needed.

Adding:

yourElement.classList.add('my_class');

Removing:

yourElement.classList.remove('my_class');

See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList