html根据下拉框选中的值修改背景颜色_html select onchange下拉框颜色

作者：很楠不爱3 | 2024-05-25 17:24:51

踩

html select onchange下拉框颜色

错误的写法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据下拉框选中的值修改背景颜色</title>
<script type="text/javascript">
function changecolo(colo){//要有返回值
var color=colo.value;

alert(color)
if(color="red"){
document.bgcolor="#FF0000"
}
if(color="yellow"){
document.bgcolor="#FFFF00"
}
if(color="green"){
document.bgcolor="#00FF00"
}
if(color="blue"){
document.bgcolor="#0000FF"
}
else{
document.bgcolor="#FFFFFF"
}
}
</script>
</head>

<body>
<form name="form1">
<select id="colo" onChange="changecolo(this)">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</form>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

纠正后

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据下拉框选中的值修改背景颜色</title>
<script type="text/javascript">
function changecolor(colo){
var color=colo.value
alert(color)
document.bgColor=color
}
</script>
</head>



<body>
<form name="form1">
<select id="colo" onChange="changecolor(this)">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</form>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

或者用document.getElementById()做

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据下拉框选中的值修改背景颜色</title>
<script type="text/javascript">
function changecolor(){
var color=document.getElementById('colo').value

alert(color)
document.bgColor=color
}
</script>
</head>

<body>
<form name="form1">
<select id="colo" onChange="changecolor()">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</form>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/623019