How do I change class of an element to get the result I want?

Question

I'm building a media player where I want the record button to flash in red while recording. I'm using Pure to style the button with css.

<button class="pure-button" onclick="record(); return false" id="idRec">Rec</button>

I'm adding another class to the button while it's recording.

var elem = document.getElementById("idRec");
elem.setAttribute("class", "pure-button recBtn");

Here's what recBtn looks like in the the stylesheet:

.recBtn {
-webkit-box-shadow: 0px 1px 3px rgba(255,000,000,0.1),inset 0px 0px 2px rgba(255,0,0,0.7);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000),to(#ff0000));
-webkit-animation-name: buttonPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}

I also have this in the stylesheet:

@-webkit-keyframes buttonPulse {
0% {
    opacity: 0.5;
}

50% {
    opacity: 1;
}

100% {
    opacity: 0.5;
 }
}

This makes the button to flash, but only in shades of gray, and only the borders turns red. But I do get the result that I want when I style the element directly (with the "@-webkit-keyframes buttonPulse" still in the stylesheet):

elem.setAttribute("style",
        "background: -webkit-gradient(linear, left top, left bottom, from(#ff0000),to(#ff0000));" +
        "-webkit-box-shadow:0px 1px 3px rgba(255,000,000,0.1),inset 0px 0px 2px rgba(255,0,0,0.7);" +
        "-webkit-animation-name: buttonPulse;" +
        "-webkit-animation-duration: 2s;" +
        "-webkit-animation-iteration-count: infinite;" +
        "-webkit-animation-timing-function: linear;");

But the problem with that method comes along when I want the button to stop flashing, because I would need to set all those individual attributes back to what they were before when they were styled by being of the "pure-button" class.

Can I somehow get the result I want by just changing the class?

use the jquery function of the removeClass and AddClass function — sss999, Apr 12 '14 at 09:40
Here you'll find what you need: [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript?rq=1) — ilias, Apr 12 '14 at 09:42
http://jsfiddle.net/46XMq/ here is a rough thing that's working in chrome. — sabithpocker, Apr 12 '14 at 10:09
@sabithpocker It works fine until you add Pure. There must be some conflict. http://jsfiddle.net/46XMq/ — user1907859, Apr 12 '14 at 10:17
Sorry, I thought I did. Try this: http://jsfiddle.net/46XMq/2/ — user1907859, Apr 12 '14 at 10:25

score 1 · Accepted Answer · answered Apr 12 '14 at 10:29

If the problem is with background not changing, just increase priority of your style by making it more specific.

#idRec.recBtn {
-webkit-box-shadow: 0px 1px 3px rgba(255,000,000,0.1),inset 0px 0px 2px rgba(255,0,0,0.7);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000),to(#ff0000));
-webkit-animation-name: buttonPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

here is a fiddle http://jsfiddle.net/46XMq/4/

How do I change class of an element to get the result I want?

1 Answers1