js onchange 是域的内容发生改变 只适合用于下拉菜单 select和文本框 textrea
#color { 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>