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中 function 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错误。我知道很难直接告诉我们这些信息，但如果我能得到一些有用的指示和指示。

谢谢 -

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中消失的背景图像问题可能是通过向position: relative;类和/或其父.button添加div声明来解决的。 1}}。

IE6 / 7和ClassName（JS / HTML）

3 个答案: