首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

怎么动态设置文本框的外观

2012-04-08 
如何动态设置文本框的外观?想通过下拉列表值,改变一个文本域的属性,如只读、边框线等。在input nameqcyby

如何动态设置文本框的外观?
想通过下拉列表值,改变一个文本域的属性,如只读、边框线等。
在<input name="qcybyjc"type="text" id="qcybyjc" value="0" size="5" readonly style="border-left:0px;border-top:0px;border-right:0px;border-bottom:1px solid #0000cc">

<input name="qcybyjc"type="text" id="qcybyjc" value="0" size="5" style="border-left:0px;border-top:0px;border-right:0px;border-bottom:1px solid #FF00cc">
之间选择,如下拉列表为1选择第一种,下拉列表为2选择第二种。
这个如何写
谢谢!!

[解决办法]
样式:
<style type="text/css">
.css1{border-left:0px;border-top:0px;border-right:0px;border-bottom:1px solid #0000cc;}
.css2{border-left:0px;border-top:0px;border-right:0px;border-bottom:1px solid #FF00cc;}
</style>
调用:
<select name="selOne" onChange="changeVal(this.value)">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input name="qcybyjc"type="text" id="qcybyjc" value="0" size="5" readonly class="css1"> 

<script language="javascript">
function changeVal(val)
{

if(val==1)
document.getElementById("qcybyjc").className = "css2";
else
document.getElementById("qcybyjc").className = "css1";
}
</script>

热点排行