javascript - 如何在点击时更改按钮图标？

Question

我有这个按钮，身上有一个图标(图片)。现在，我想做的是点击一个按钮图标(图片)将更改为另一个图标，当您再次点击时它会跳回旧图标。 (如切换原则)。

这是我的按钮 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 编写代码，当我点击按钮时，图标(背景图片)会改变并保持原样，直到你再次点击会回到旧的(如切换系统)

Answer 1

在支持 addEventListener 的现代浏览器上和 Class List API (垫片可用于它们各自的 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