javascript - 如何更改元素的类以获得我想要的结果？

Question

我正在构建一个媒体播放器，我希望录制按钮在录制时以红色闪烁。我正在使用 Pure 通过 CSS 来设计按钮的样式。

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

我正在录制时向按钮添加另一个类。

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

这是 recBtn 在样式表中的样子:

.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;
}

我在样式表中也有这个:

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

50% {
    opacity: 1;
}

100% {
    opacity: 0.5;
 }
}

这使按钮闪烁，但只有灰色阴影，只有边框变成红色。但是当我直接为元素设置样式时，我确实得到了我想要的结果(样式表中仍然有“@-webkit-keyframes buttonPulse”):

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;");

但是当我希望按钮停止闪烁时，该方法就会出现问题，因为我需要将所有这些单独的属性设置回它们之前的状态，因为它们属于“纯按钮”类。 .

我是否可以通过更改类以某种方式获得我想要的结果？

Answer 1

如果问题是背景没有改变，只需通过使样式更具体来提高样式的优先级即可。

#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;
}

这是一把 fiddle http://jsfiddle.net/46XMq/4/