JavaScript实现更改背景颜色
2018-12-05 本文已影响0人
Leophen
（onload和onchange的运用）
实现效果：
进入网页.jpg
选粉显示.jpg
选黄显示.jpg
选橙显示.jpg
选回去.jpg
附上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onchange()</title>
<style type="text/css">
#div{
width:300px;
height:300px;
border:2px solid gray;
margin-top:10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var menu=document.getElementById("color"),
divx=document.getElementById("div");
menu.onchange=function(){
bgcolor=menu.value;
divx.style.background=bgcolor;
if(bgcolor==0){
divx.innerHTML="我没变";
}
else{
divx.innerHTML="我变"+bgcolor+"了";
}
}
}
</script>
</head>
<body>
<div>
<span>请选择您喜欢的颜色:</span>
<select id="color">
<option value="0">请选择</option>
<option value="pink">粉色</option>
<option value="yellow">黄色</option>
<option value="orange">橙色</option>
</select>
</div>
<div id="div">我是div</div>
</body>
</html>
