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

这是一个小提琴http://jsfiddle.net/46XMq/4/

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

1 个答案: