3

アイコン（写真）のあるこのボタンがあります。今、私がやりたいのは、ボタンアイコン（写真）をクリックすると別のアイコンに変わり、もう一度クリックすると古いアイコンに戻ります。（トグル原理のように）。

ここに私のボタンCSSコードがあります:

.w8-button {
    display: table;
    padding: 7px 15px 8px 15px;
    border: none;
    font-family: "open_sans_lightregular";
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
}

CSSアイコンコードは次のとおりです。

.w8-button.iconize {
    padding-right: 50px !important;
    background: url(D:/firstPicture.png) no-repeat 115px center;
}

そして、これは私がhtmlでボタンを呼び出す方法です: 

<li>
  <input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>

誰かがJavaScriptでコードを実行する方法を教えてもらえますか?ボタンをクリックするとアイコン(背景画像)が変化し、もう一度クリックするまで古いものに戻ります(トグルシステムのように)

4

3 に答える 3

3

Class List APIaddEventListenerをサポートする最新のブラウザー(古いブラウザーのサポートを追加するために、それぞれの MDN ページでシムを使用できます) では、これを行うことができます。

CSS

.w8-button {
    display: table;
    padding: 7px 15px 8px 15px;
    border: none;
    font-family:"open_sans_lightregular";
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
}
.w8-button.iconize {
    padding-right: 50px !important;
    background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
    padding-right: 50px !important;
    background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}

HTML

<li>
    <input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>

Javascript

document.getElementById("w8-d-blue").addEventListener("click", function (e) {
    var target = e.target;

    target.classList.toggle("iconize");
    target.classList.toggle("iconize2");
}, false);

jsfiddleについて

于 2013-06-28T00:31:10.377 に答える