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）{         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、クローム、オペラとSafariで完璧に動作しますので、IEのバグです。私はそれがすぐにのみこれらの情報から伝えるのは難しいのですが、私は参考になるいくつかのポインタと方向性を得ることができるかどうかを知ります。

おかげ -

Answer 1

あなたは50pxの幅とあなたがプレイパートとストップ部分の両方を持っている24pxの高さと、<私> 1 のイメージを作成する必要があります。そして、あなたはこのような背景の位置を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クラスを作っていることに注意してください。今、あなたの要素の上に2つのクラスを適用する必要があります。例：

<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宣言を追加することによって解決されます。