html根据下拉框选中的值修改背景颜色
生活随笔
收集整理的這篇文章主要介紹了
html根据下拉框选中的值修改背景颜色
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
錯(cuò)誤的寫法
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>根據(jù)下拉框選中的值修改背景顏色</title>
6 <script type="text/javascript">
7 function changecolo(colo){// <<錯(cuò)誤點(diǎn)，要有返回值
8 var color=colo.value;
9 alert(color)
10 if(color="red"){
11 document.bgcolor="#FF0000"
12 }
13 if(color="yellow"){
14 document.bgcolor="#FFFF00"
15 }
16 if(color="green"){
17 document.bgcolor="#00FF00"
18 }
19 if(color="blue"){
20 document.bgcolor="#0000FF"
21 }
22 else{
23 document.bgcolor="#FFFFFF"
24 }
25 }
26 </script>
27 </head>
28 <body>
29 <form name="form1">
30 <select id="colo" onChange="changecolo(this)">
31 <option value="red">紅色</option>
32 <option value="yellow">黃色</option>
33 <option value="green">綠色</option>
34 <option value="blue">藍(lán)色</option>
35 </select>
36 </form>
37 </body>
38 </html>
糾正后
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>根據(jù)下拉框選中的值修改背景顏色</title>
6 <script type="text/javascript">
7 function changecolor(colo){
8 var color=colo.value
9 alert(color)
10 document.bgColor=color
11 }
12 </script>
13 </head>
14
15 <body>
16 <form name="form1">
17 <select id="colo" onChange="changecolor(this)">
18 <option value="red">紅色</option>
19 <option value="yellow">黃色</option>
20 <option value="green">綠色</option>
21 <option value="blue">藍(lán)色</option>
22 </select>
23 </form>
24 </body>
25 </html>
或者用document.getElementById()做
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>根據(jù)下拉框選中的值修改背景顏色</title>
6 <script type="text/javascript">
7 function changecolor(){
8 var color=document.getElementById('colo').value
9 alert(color)
10 document.bgColor=color
11 }
12 </script>
13 </head>
14 <body>
15 <form name="form1">
16 <select id="colo" onChange="changecolor()">
17 <option value="red">紅色</option>
18 <option value="yellow">黃色</option>
19 <option value="green">綠色</option>
20 <option value="blue">藍(lán)色</option>
21 </select>
22 </form>
23 </body>
24 </html>
365個(gè)夜晚，我希望做到兩天更一篇博客。加油，小白！
總結(jié)
以上是生活随笔為你收集整理的html根据下拉框选中的值修改背景颜色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： uni-app设置页面背景及背景图片
- 下一篇： hbuilderx快捷键、回到上一步、回