1

我有一个带有图像的 HTML 按钮，可以在每次点击时切换图像。这是我在每次单击时设置类并根据当前类图像显示的方法。

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

}

这在 chrome 和 Firefox 上运行良好，这里的问题是这在 IE 上不起作用，甚至按钮都没有出现，如果有人能给我提示让我在 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");
}
4

3 回答 3

3

使用 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/

让我知道这有帮助吗？

于 2013-09-02T10:26:50.403 回答
1

将Type属性添加到第一个按钮并关闭按钮元素。

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

希望它可以帮助你。

于 2013-09-02T11:05:24.907 回答
1

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

更改背景图像的示例（未经测试）：

// On button click
$('#butFullScreen').click(function() {
    // Change background image
    $(this).css('background-image', url('images/fullScreen.png')); 
});
于 2013-09-02T11:25:14.380 回答