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）

回答

相關問題