style="background-color:blue"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>通过鼠标的移动改变文本框的背景色</title>
</head>
<body>
<form name="form1" method="post" action="index.php">
<table width="538" height="304" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="531" height="248" background="images/image_01.gif"> </td>
</tr>
<tr align="center">
<td height="55" colspan="2" background="images/image_02.gif">用户名：
<input name="name" type="text" id="name" style="border-width:1;padding-left:4;padding-right:4;padding-top:1;padding-bottom:1;width:120px;height:15px" onFocus="this.select(); " onMouseOver="this.style.background='FF0000';" onMouseOut="this.style.background='#FFFFFF'" size="80">
密码：
<input name="pwd" type="password" id="pwd" style="border-width:1;padding-left:4;padding-right:4;padding-top:1;padding-bottom:1;width:120px;height:15px" onFocus="this.select(); " onMouseOver="this.style.background='00FF00';" onMouseOut="this.style.background='#FFFFFF'" size="80">
<input name="Btn_tj" type="image" src="images/2.gif" value="登录" width="55" height="22" border="0"><br> </td>
</tr>
</table>
</form>
<?php
if ($_POST["Btn_tj"]==""){
?>
<script language="javascript">
alert("快看！鼠标指向文本框时，背景颜色变了吧！");
</script>
<?php
}
?>
</body>
</html>
<html>
<head>
<style>
/* input{
background:expression((this.disabled && this.disabled==true)?"#F03":"")} */
</style>
<script type="text/javascript">
function my_change()
{
if(document.getElementById("select_id").value==0)
{
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=false;
document.getElementById("text3").disabled=true;
document.getElementById("text1").style.backgroundColor="#e9e9e9";
document.getElementById("text2").style.backgroundColor="#FFF";
document.getElementById("text3").style.backgroundColor="#e9e9e9";
}
else if(document.getElementById("select_id").value==1)
{
document.getElementById("text1").disabled=false;
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
document.getElementById("text1").style.backgroundColor="#FFF";
document.getElementById("text2").style.backgroundColor="#e9e9e9";
document.getElementById("text3").style.backgroundColor="#e9e9e9";
}
else
{
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=false;
document.getElementById("text1").style.backgroundColor="#e9e9e9";
document.getElementById("text2").style.backgroundColor="#e9e9e9";
document.getElementById("text3").style.backgroundColor="#FFF";
}
}
</script>
</head>
<body onLoad="my_change();">
<table>
<tr>
<td>
<select id="select_id" name="select_id" onChange="my_change();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select></td>
</tr>
<tr>
<td>
<input type="text" id="text1" name="text1"/></td>
</tr>
<tr>
<td><input type="text" id="text2" name="text2"/></td>
</tr>
<tr>
<td><input type="text" id="text3" name="text3"/></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>通过鼠标的移动改变文本框的背景色</title>
</head>
<body>
<form name="form1" method="post" action="index.php">
<table width="538" height="304" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="531" height="248" background="images/image_01.gif"> </td>
</tr>
<tr align="center">
<td height="55" colspan="2" background="images/image_02.gif">用户名：
<input name="name" type="text" id="name" style="border-width:1;padding-left:4;padding-right:4;padding-top:1;padding-bottom:1;width:120px;height:15px" onFocus="this.select(); " onMouseOver="this.style.background='FF0000';" onMouseOut="this.style.background='#FFFFFF'" size="80">
密码：
<input name="pwd" type="password" id="pwd" style="border-width:1;padding-left:4;padding-right:4;padding-top:1;padding-bottom:1;width:120px;height:15px" onFocus="this.select(); " onMouseOver="this.style.background='00FF00';" onMouseOut="this.style.background='#FFFFFF'" size="80">
<input name="Btn_tj" type="image" src="images/2.gif" value="登录" width="55" height="22" border="0"><br> </td>
</tr>
</table>
</form>
<?php
if ($_POST["Btn_tj"]==""){
?>
<script language="javascript">
alert("快看！鼠标指向文本框时，背景颜色变了吧！");
</script>
<?php
}
?>
</body>
</html>
<html>
<head>
<style>
/* input{
background:expression((this.disabled && this.disabled==true)?"#F03":"")} */
</style>
<script type="text/javascript">
function my_change()
{
if(document.getElementById("select_id").value==0)
{
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=false;
document.getElementById("text3").disabled=true;
document.getElementById("text1").style.backgroundColor="#e9e9e9";
document.getElementById("text2").style.backgroundColor="#FFF";
document.getElementById("text3").style.backgroundColor="#e9e9e9";
}
else if(document.getElementById("select_id").value==1)
{
document.getElementById("text1").disabled=false;
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
document.getElementById("text1").style.backgroundColor="#FFF";
document.getElementById("text2").style.backgroundColor="#e9e9e9";
document.getElementById("text3").style.backgroundColor="#e9e9e9";
}
else
{
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=false;
document.getElementById("text1").style.backgroundColor="#e9e9e9";
document.getElementById("text2").style.backgroundColor="#e9e9e9";
document.getElementById("text3").style.backgroundColor="#FFF";
}
}
</script>
</head>
<body onLoad="my_change();">
<table>
<tr>
<td>
<select id="select_id" name="select_id" onChange="my_change();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select></td>
</tr>
<tr>
<td>
<input type="text" id="text1" name="text1"/></td>
</tr>
<tr>
<td><input type="text" id="text2" name="text2"/></td>
</tr>
<tr>
<td><input type="text" id="text3" name="text3"/></td>
</tr>
</table>
</body>
</html>
扫一扫
2742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
