1

我正在尝试使用 javascript 更改元素的类。到目前为止，我正在做：

var link = document.getElementById("play_link");
link.className = "play_button";

编辑：这是替换类名的实际代码

在 HTML 中：

<a href="#play_link_<%=i%>" id="play_link_<%=i%>"onclick="changeCurrentTo(<%=i%>);return false;" class="play_button"></a>

在 Javascript 函数中 changeCurrentTo(id){ activatePlayButton(current_track); current_track = id; inactivatePlayButton(current_track); }

function inactivatePlayButton(id){
    document.getElementById("recording_"+id).style.backgroundColor="#F7F2D1";
    var link = document.getElementById("play_link_"+id);
    link.className="stop_button";
    link.onclick = function(){stopPlaying();return false;};
}

function activatePlayButton(id){
    document.getElementById("recording_"+id).style.backgroundColor="";
    var link = document.getElementById("play_link_"+id);
    link.className = "play_button";
    var temp = id;
    link.onclick = function(){changeCurrentTo(temp);return false;};
}

和

.play_button{
    background:url(/images/small_play_button.png) no-repeat;
    width:25px;
    height:24px;
    display:block;
}

老班是

.stop_button{
    background:url(/images/small_stop_button.png) no-repeat;
    width:25px;
    height:24px;
    display:block;
}

上下文是一个音乐播放器。当您单击播放按钮（三角形）时，它会变成一个停止按钮（正方形）并替换调用的函数。

问题是类发生了变化，但在 IE6 和 7 中，新背景（此处为 /images/small_play_button.png）不会立即显示。有时它甚至根本不显示。有时它不显示，但如果我稍微摇晃鼠标，它就会显示。

它在 FF、Chrome、Opera 和 Safari 中完美运行，所以它是一个 IE 错误。我知道很难从这些信息中立即分辨出来，但如果我能得到一些有用的指示和方向的话。

谢谢-

4

3 回答 3

3

您应该创建一个宽度50px和高度为 的图像24px，您同时拥有播放部分和停止部分。然后你只需像这样调整背景位置：


.button
{
    background-image: url(/images/small_buttons.png);
    bacground-repeat: no-repeat;
    width: 25px;
    height: 24px;
    display: block;
}

.play_button
{
    background-position: left top;
}

.stop_button
{
    background-position: right top;
}

然后您同时加载“两个图像”，当您更改图像的显示部分时不会发生延迟。

请注意，我创建了一个新的 CSS 类，这样您就不需要为不同的按钮重复 CSS。您现在需要在您的元素上应用两个类。例子：

<div class="button play_button"></div>
于 2009-04-22T18:42:45.697 回答
0

您需要在两个功能中使用 setAttribute 。试试这个：
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");

于 2009-04-22T18:57:38.077 回答
0

如果没有看到确切的标记，很难说，但是 IE 中消失的背景图像问题可能通过向类和/或其 parent中添加position: relative;声明来解决。.buttondiv

于 2009-08-31T19:43:41.787 回答