Removing the :active pseudo-class from an element

Question

I'd like to be able to tell an element that it is no longer :active so that the CSS rules no longer apply. Is there any way to do this in JavaScript?

Answer 1

Possible solutions :

1) Using classes :

JS :

document.getElementById("element").classList.remove("hasactive");

CSS :

#element.hasactive:active {
    background:blue;
}

2) Preventing default mousedown functionality (active state) :

EDIT : Apparently, this only works on Firefox.

JS :

document.getElementById("element").onmousedown = function(event) {
    event.preventDefault();
}

3) Removing a style element with the css rule in it

HTML :

<style id="activestyle">
#element:active {
/*Your code here*/
}
</style>

JS :

document.getElementById("activestyle").remove();