單擊鼠標時html按鈕的更改（切換）圖像（在Internet Explorer中）

Question

我有一個帶有圖像的HTML按鈕，該按鈕在每次單擊時都會切換圖像。 這是我每次單擊設置班級的方法，並根據當前班級圖像顯示。

function FullScreenToggle(el){
    if(el.className!="ns")
    {
        el.className="ns";
    }
    else if(el.className=="ns")
    {
        el.className="fs";
    }

return false;

}

這在chrome和Firefox上可以正常工作，這里的問題是這在IE上不起作用，甚至按鈕也沒有出現。

更新資料

我的HTML

 <button class="fullScreen" data-dojo-type="dijit.form.Button" onclick="FullScreenToggle(this);" id="butFullScreen">
                                <input type="image" class="ns" onclick="FullScreenToggle(this);" value="" />

的CSS

.claro #butFullScreen .ns{
    background-image: url("images/fullScreen.png");
}
.claro #butFullScreen .fs{
    background-image: url("images/fullScreenExit.png");
}

Answer 1

使用Jquery，Jquery將適用於所有瀏覽器。

在這里更改：

FullScreenToggle(this)到FullScreenToggle(this.id)

我假設這里參數是元素的ID

function FullScreenToggle(el)
{
    ($("#"+el).attr('class') != "ns" ) ? $("#"+el).addClass("ns").removeClass('fs') : $("#"+el).addClass("fs").removeClass('ns');
    return false;
}

要么

您也可以使用切換類

http://api.jquery.com/toggleClass/

讓我知道這有幫助嗎？

Answer 2

將“ Type屬性添加到第一個按鈕，然后關閉按鈕元素。

<button type="button" class="fullScreen" id="butFullScreen">
</button>

希望對您有幫助。

Answer 3

如果有人想知道如何做Fabien的答案： http : //jsfiddle.net/wHkVg/2/

更改背景圖片的示例（未試用）：

// On button click
$('#butFullScreen').click(function() {
    // Change background image
    $(this).css('background-image', url('images/fullScreen.png')); 
});