Question

我放了一个输入按钮，并用图像设置背景，现在我想在点击按钮时更改该图像。

以下是我的相关代码：

<div id='back'>
    <input type="button"/>
</div>

CSS 代码：

#back input{
    width: 130px;
    height: 130px;
    background: url(img/back_default.png);
    border: hidden;
}

可以在CSS中完成（与链接 - <a>标签一样），还是应该依赖JavaScript？感谢。

Answer 1

不需要Javascript：

#back input {
    width: 130px;
    height: 130px;
    background: url(img/back_default.png);
    border: hidden;
}

#back input:active {
    background-image: url(img/back_default-active.png);
}

Answer 2

这适用于JavaScript：

function change() { 
    document.
        getElementById("back").
        getElementsByTagName("input").
        style.backgroundImage = "url(img/anotherImage.png)"
}

通过单击按钮（或从任何您想要的地方）调用它：

<div id='back'>
    <input type="button" onclick="change()"/>
</div>

Answer 3

就像Matt所说，你可以使用CSS的活动伪类来改变背景，或者你可以使用javascript将eventHandler（onClick Listner）添加到改变图像的按钮。

<强> HTML

<div id='back'>
     <input type="button" id="xyz" value="Go to back" class="button"/>
</div>

<强> JS

<script>

el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);

function changeImg()
{
    el = document.getElementById('xyz');
    el.style.backround="url('img/back_default-active.png')";
}

</script>

单击按钮时更改按钮的图像背景

3 个答案: