JavaScriptの画像の背景位置を設定する

Question

画像を背景とするリンクをクリックすると、背景の位置を変更するonClickイベントが必要になります。これは、リンクです：

<a href="#" id="favorite_1" class="favorite" onClick="favoriteBusiness(1);">Favorite</a> 

それはすでにCSSに設定され、二つの状態があり、定期的かつホバーが12ピクセルずつシフトしている、ホバーです。

a.favorite { 
    width: 15px; 
    height: 12px; 
    background: url(img/icon-fav.png) no-repeat; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    right: 0; 
    text-indent: -300px; 
} 

a.favorite:hover { 
    background-position: 0 -12px 
} 

イメージを1回クリックすると、ホバー状態と同じに設定する必要があります。

私はこのようなことをやって、それが動作します：

document.getElementById("favorite_1").style.backgroundPosition = "0 -12px"; 

しかし、リンクを再度クリックされたとき、私はそれが正常に戻った背景位置に切り替える必要があると私はそれを得ることができません作業。これは私が試している機能ですが、バックグラウンドを "0 -12px"に移動するためにのみ機能し、元の位置に戻すことはできません。

function favoriteBusiness(id){ 

    if(document.getElementById("favorite_1").style.backgroundPosition == "0 -12px") 
    document.getElementById("favorite_1").style.backgroundPosition = ""; 
    else 
    document.getElementById("favorite_1").style.backgroundPosition = "0 -12px"; 

} 

誰かが正しい方向に向いていますか？

Answer 1

計算をしない限り、新しい位置を含むクラスを追加したり削除したりするのがよいでしょう。これは、通常、CSSスプライトを操作するために行われます。