点击JavaScript更改背景图片

Question

您好，我有一些JavaScript问题。 我有一个div来布局执行某项操作的按钮（按我的追究，它将在框中插入数字1），并且我想在单击时更改按钮的背景：

<div id="nr1"><INPUT TYPE="button" NAME="one"   OnClick="this.style = 'background-image:URL(images/totalback.gif);'; Calc.Input.value += '1'" style="width:45px; height:30px; background-color:transparent;  border-style: none; border-width: 0px 0px 0px 0px"></div>

这是代码，但忽略了我的背景图像更改。 谁能帮我？ 简短信息：我对javascript知之甚少。

还是要谢谢你。

Answer 1

使用javascript时，您需要这样做：

this.style.backgroundImage="url()";

请注意，javascript会稍微更改语法，而不是使用backgroundImage来替换background-image。

Answer 2

你为什么不像这样简单地使用jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $('#nr1 input').on("click", function(){
         $(this).css({'background' : 'red'});
      });
   });
</script>

http://api.jquery.com/css/

Answer 3

我希望您可以在CSS中使用如下所示的内容：

#your_btn_id{
    width:200px;
    height:50px;
    background-image: url('../images/inactive.png');
}

单击后，更改背景图像：

#your_btn_id:active{
    background-image: url('../images/active.png');
}

希望它会起作用，而且事情很简单。