从内联css和JavaScript中单击更改按钮图像

Question

如何制作一个内联css，可以点击更改输入按钮的颜色或图像？

<div><input type="button" id="btn" style="background-image:url('old.png');width:36px;height:36px;" onclick="change();"></div>

function change() { 
    document.getElementById("btn").style.backgroundImage=url('new.png');
} 

如何使用JavaScript完成此操作？我错过了什么......

或者是否可能更容易使用html或css解决方案？

Answer 1

<input type="button" id="btn" style="background-color:green;width:36px;height:36px;" onclick="change();">

Answer 2

你需要适当地包装字符串。

document.getElementById("btn").style.backgroundImage=url('new.png');

应该是

document.getElementById("btn").style.backgroundImage="url('new.png')";

Answer 3

小提琴：http://jsfiddle.net/Anee/cUTj8/1/

你有type="button"。如果按下按钮，则应为onclick而不是onchange

<input type="button" id="btn" style="background-color:green;width:36px;height:36px;" onclick="change(this);">


function change(myinput) { 
   myinput.style.backgroundImage= "url('new.png')";
}