Adjusting button style with JavaScript is rendering the CSS :active event useless

Question

I'm making a basic-looking Simon clone in HTML, JavaScript, and CSS, and I recently wrote a function called displayShine(color) that does just that: When called, let's say on red, it makes the intended div flash with a large box-shadow: 0px 0px 100px red . This is what the JavaScript function looks like:

function displayShine(color) {
    var toShine = document.getElementById(color);
    var hexValue;
    var secondaryHexValue;

    if (color == "red") { hexValue = "#e74c3c"; secondaryHexValue = "#c0392b"; }
    else if (color == "yellow") { hexValue = "#f1c40f"; secondaryHexValue =    "#f39c12"; }
    else if (color == "green") {hexValue = "#2ecc71"; secondaryHexValue = "#27ae60"; }
    else if (color == "blue") {hexValue = "#3498db"; secondaryHexValue = "#2980b9"; }
    else { hexValue = "#000000"; }

    finalString = ("3px 3px 0px " + secondaryHexValue + 
                           ", 2px 2px 0px " + secondaryHexValue + 
                           ", 1px 1px 0px " + secondaryHexValue + 
                           ", 0px 0px 100px " + hexValue)

    toShine.style.boxShadow = finalString;

    setTimeout(function() {
        toShine.style.boxShadow = ("6px 6px 0px " + secondaryHexValue + 
                               ", 5px 5px 0px " + secondaryHexValue + 
                               ", 4px 4px 0px " + secondaryHexValue + 
                               ", 3px 3px 0px " + secondaryHexValue + 
                               ", 2px 2px 0px " + secondaryHexValue + 
                               ", 1px 1px 0px " + secondaryHexValue);
    }, 500);
}

I also have CSS for #red:active, where when the button is pressed manually by the user it glows with the same large box-shadow: 0px 0px 100px red . This is what that CSS looks like (it's the same for every color, just with different hexadecimal values):

#red {
    background-color: #e74c3c;
    box-shadow: 6px 6px 0px #c0392b,
                5px 5px 0px #c0392b,
                4px 4px 0px #c0392b,
                3px 3px 0px #c0392b,
                2px 2px 0px #c0392b,
                1px 1px 0px #c0392b;
}

#red:active {
    box-shadow: 3px 3px 0px #c0392b,
                2px 2px 0px #c0392b,
                1px 1px 0px #c0392b,
                0px 0px 100px #e74c3c;
}

Basically, the CSS works fine, and when the button is clicked it gives a little animation of being depressed and then coming back up again, as well as glowing and then un-glowing, or whatever you want to call it. My only issue is that once I call some displayShine() function with any color as the argument, that particular element no longer animates the way I want it to on #red:active or whatever it is. It still looks right when inactive, and the :hover event (which is done with a class rather than an id so I only had to write it once for all four Simon colored buttons) ALSO works perfectly. The only problem comes when it's active, in which case it defaults to the standard #red CSS.

Anyone have an idea of what's going on? Any help is appreciated, and I can include more code if anyone wants.

Answer 1

Inline style (which the style.foo properties map on to) have the highest precidence in the cascade so will override anything in the stylesheet, no matter what the selector is.

Define your colours in your stylesheet and cause them to apply by modifying the classes that the element belongs to instead.