IE6/7 和 ClassName (JS/HTML)

Question

我正在尝试使用 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); 当前轨道=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 的 bug。 我知道仅凭这些信息很难立即判断，但如果我能得到一些指示和方向，那将会有所帮助。

谢谢-

Answer 1

您应该创建宽度为 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>

Answer 2

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

Answer 3

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