JavaScript - Removing :active CSS selector and making :active -

JavaScript - Removing :active CSS selector and making :active -

bit of odd question, possible in javascript stop :active css selector working? mean when click on element, not show visible change. need able turned on , off, property. (for illustration activeselector = true|false)

i wondering if possible create :active selector permanent? element clicking on it? need able turned on , off well.

and, create things harder, need specific different elements, 1 button beingness clicked, shows no alter when click on it, , other works normally.

i know create 3 different css classes (.fullactive, .alwayson , .nochange), wondering if there easier way?

it's thought separate presentation logic much can. also, it's bad thought futz default element behaviors when don't have to.

one strategy utilize creating 1 active class defines appearance of active button. you'd define matching style :active state of element. utilize data attributes helpers logic.

so always-on button might be:

<button data-behavior="neverchange" class="active">i'm active</button>

an always-off button might be:

<button data-behavior="neverchange">i'm inactive</button>

then tell css apply "default" styles elements have info attribute of data-behavior that's set neverchange.

button, button[data-behavior="neverchange"]:active { background-color: #ccc; }

then in javascript, it's matter of changing data-behavior attribute when want modify element's behavior.

javascript css