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

2023-05-11,,

错误的写法


<!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>


纠正后

<!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>


或者用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>

html根据下拉框选中的值修改背景颜色的相关教程结束。

《html根据下拉框选中的值修改背景颜色.doc》

下载本文的Word格式文档,以方便收藏与打印。