IE6/7 和类名 (JS/HTML)答案

【问题标题】：IE6/7 And ClassName (JS/HTML)IE6/7 和类名 (JS/HTML)
【发布时间】：2010-10-21 03:53:22
【问题描述】：

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

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

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

在 HTML 中：

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

在 Javascript 中函数 changeCurrentTo(id){ 激活播放按钮（当前轨道）； 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 错误。我知道仅凭这些信息很难马上分辨出来，但如果我能得到一些有用的指示和方向的话。

谢谢-

【问题讨论】：

你用什么来触发类变化？
我正在使用 onclick。这是标签和 js 调用：
我正在使用锚标记，因为没有其他标记可以与 IE6 中的 onclick 操作一起正常工作，因此返回 false hack。
您能否提供一个用于将一个类替换为另一个类的实际代码示例？
@Jon：我添加了本期讨论范围内的所有代码

标签： javascript html internet-explorer xhtml classname

【解决方案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。您现在需要在您的元素上应用两个类。示例：

&lt;div class="button play_button"&gt;&lt;/div&gt;

【讨论】：

好吧，我试过了，多亏了这个，代码更干净了。现在它可以在 IE7 \o/ 中工作了。但我仍然有同样的背景消失问题。摇动鼠标把它带回来^^

【解决方案2】：

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

【讨论】：

FWIW, davidjrush.com/blog/2009/05/… 提到 IE 偶尔会决定不正确执行 setAttribute( "class", value )，因此可能还需要调用 setAttribute("className", value )。（所以这里是四行代码而不是两行。）

【解决方案3】：

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

【讨论】：