js onchange案例

js onchange  是域的内容发生改变 只适合用于下拉菜单  select和文本框 textrea
  
#color {
           width: 300px;
           height: 300px;
           margin: 100px auto;
            border: 1px solid black;
       }
   </style>
</head>
<body>
    选择你喜欢的颜色:
    <select id="select">
        <option value="0">--请选择--</option>
        <option value="pink">粉色</option>
        <option value="green">绿色</option>
        <option  value="black">黑色</option>
        <option value="red">红色</option>
        <option value="yellow">黄色</option>  
    </select>
    <div id="color">请选择你喜欢的颜色作为背景颜色</div>
    <script>
      var select=document.getElementById("select"); //取出下拉菜单id
      var color=document.getElementById("color");//去除div的id
      select.onchange=function() {  //下拉域的内容发生改变
          var bg=this.value;  //this指向的是select里面的value值
          if (this.value==0) {  //判断
            color.style.background="white";  
            color.innerHTML="请选择你喜欢的颜色作为背景颜色"  //innerHTML在值里面书写内容
          }else if(this.value=="black"){
            color.style.backgroundColor=bg; //因为黑色会挡住文字的颜色
              color.innerHTML="瞧！我变色了";
              color.style.color="white"//所有我给它定义了一个白色
            
          }else{
            color.style.background=bg;
              color.innerHTML="瞧！我变色了";
          }
      }
    </script>

 

posted @ 2020-05-12 17:49  鱼皮七秒  阅读(252)  评论(0)  编辑  收藏  举报