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

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

本文关键字：我想要 结果 何更改 元素      更新时间：2023-09-26

我正在构建一个媒体播放器，我希望录制时录制按钮以红色闪烁。我正在使用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;");

但是，当我希望按钮停止闪烁时，该方法就会出现问题，因为我需要将所有这些单独的属性设置回以前通过"纯按钮"类设置样式时的状态。

只要换一个班，我就能得到我想要的结果吗？

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

#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/

相关文章：