动态改变HTML 的＜input＞ 标签的背景色

以button为例，如果需要鼠标移动到上面会变色。可以有两种方法。

1.用css设置。

先定义一个css类型，确定正常情况下的background颜色。再定义hover状态下的背景色。

.bt1{
        background-color: #F5F8F0;
}

.bt1:hover{
        background-color: #006BCD;
}

然后在body中定义input元素时用上这个class就行了。

<input  type="button" class=bt1 name="xxx">

2.用JavaScript动态设置。

首先在head中添加script标签，定义两个函数lightColor，和restoreColor 。

函数中通过获取元素的id，来修改它的背景颜色属性。

<script language="javascript">

function lightColor()
{
    var obj;
    obj = document.getElementById("btnx");
    obj.style="background-color:#0099ff";
}

function restoreColor ()
{
    var obj;
    obj = document.getElementById("btnx");
    obj.style="background-color:#FFFFFF";
}

</script>

再在body中定义input元素，其onmouseover 和onmouseout事件分别调用以上两个函数.记得指定id，因为函数是通过id定位元素的。

<input  type="button"  id="btnx" name="xxx" onmouseout="restoreColor" onmouseover="lightColor">

扩展：

这里的事件如果换成onclick，就可以通过点击触发背景色改变。