IE6/7和ClassName（JS/HTML）

我想改变使用javascript的元素的类。到目前为止我做：IE6/7和ClassName（JS/HTML）

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 bug。我知道很难立即告诉这些信息，但如果我能得到一些有用的指示和方向的话。

Thanks-

来源

2009-04-22 marcgg

你用什么来触发班级变更？ – 2009-04-22 16:51:40

我正在使用onclick。这里是标记和js电话： – marcgg 2009-04-22 17:27:52

我使用了一个定位标记，因为没有其他标记可以在IE6中使用onclick动作正确工作，因此返回false hack。 – marcgg 2009-04-22 17:28:45

您应该创建一个与的50px的宽度和24px，你必须发挥部分和停止部分都高度图像。然后你只需ajust这样的背景位置：


.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-22 18:42:45 knut

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

来源

2009-04-22 18:57:38

没有看到确切的标记，这是很难说，但在IE中消失的背景图像问题可能是由添加position: relative;声明的.button类和/或解决其母公司div。

来源

2009-08-31 19:43:41

IE6/7和ClassName（JS/HTML）

回答

相关问题