點擊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');
}

希望它會起作用，而且事情很簡單。