javascript - IE6/7 和类名 (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){ 激活播放按钮(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;
}

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

问题是类别发生了变化，但在 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>