1

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、Chrome、Opera、Safari で完全に動作するため、IE のバグです。これらの情報だけですぐに判断するのは難しいことは承知していますが、参考になるヒントや指示を得ることができれば.

ありがとう-

4

3 に答える 3

3

再生部分と停止部分の両方がある場所の幅と高さを持つ1 つの画像を作成する必要があります。次に、次のように背景の位置を調整します。50px24px


.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>
于 2009-04-22T18:42:45.697 に答える
0

2 つの関数で setAttribute を使用する必要があります。これを試してください：
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");

于 2009-04-22T18:57:38.077 に答える
0

正確なマークアップを見ないと何とも言えませんが、IE で背景画像が消える問題は、クラスやその親にposition: relative;宣言を追加することで解決される可能性があります。.buttondiv

于 2009-08-31T19:43:41.787 に答える