根据input的type来控制css样式

http://blog.csdn.net/ldl22847/article/details/5016529

<style type="text/css">
/*
根据input的type来控制css样式
*/

/*
1.用css的expression判断表达式

优点：简单，轻量级
缺点：expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉
 
input
{
background-color:expression(this.type=="text"?'#FFC':'#eee');
} 
*/

/*
2.用css中的type选择器

优点：简单，明了，可以分区出各个input控件形态。
缺点：type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持

input[type="text"]
{
background-color:aquamarine;
}
input[type="password"]
{
background-color:bisque;
}
input[type="submit"]
{
background-color:blueviolet;
}
input[type="reset"]
{
background-color:chocolate;
}
input[type="radio"]
{
background-color:darkcyan;
}
input[type="checkbox"]
{
background-color:dodgerblue;
}
input[type="button"]
{
background-color:purple;
}
*/
</style>

<script type="text/javascript">
/*
  3.用javascript脚本实现
  
  优点：可以分区出各个input控件形态。
  缺点：技术牵扯面教广，因为用js后期处理，所以在js没有起作用之前，各个input还是原始状态较致命的是FireFox不支持
*/
function GetCss(obj)
{
   var colorArr=new Array("aliceblue","antiquewhite","aqua","aquamarine","darkgreen","darkslateblue","magenta","sienna");
   var tpArr=new Array("text","password","submit","reset","radio","checkbox","button","file");
   for(var i=0;i<tpArr.length;i++)
   {
      if(obj.type==tpArr[i])
   {
      obj.style.backgroundColor=colorArr[i];
   }
   }
}
function CheckType()
{
  var obj = document.getElementsByTagName("input");
  for (var i=0;i<obj.length;i++)
  {
     GetCss(obj[i]);
  }
}
</script>

<form>
    <input type="text" /> 
  <br>
  <br>
    <input type="password"/>
     <br>
    <br>
    <input type="submit"/>
    <br>
    <br>
    <input type="reset"/>
    <br>
    <br>
    <input type="radio"/>
    <br>
    <br>
    <input type="checkbox"/>
    <br>
    <br>
    <input type="button"/>
    <br>
    <br>
    <input type="file" />
    <br>
    <br>
    <input type="hidden"/>
    <br>
    <br>
    <input type="image"/>
    <br>
</form>
<script>
CheckType();
</script>

最后

以上就是激昂向日葵为你收集整理的根据input的type来控制css样式的全部内容，希望文章能够帮你解决根据input的type来控制css样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。