本文介绍了一个简单的HTML页面，该页面包含一个可变色的DIV元素和七个按钮，每个按钮对应一种彩虹颜色。通过JavaScript为每个按钮添加点击事件，使得每次点击按钮时，DIV背景颜色会变为对应的颜色。
<html>
<head>
<metacharset="UTF-8">
<title>点击按钮使div变色</title>
<style>
div{
border:1px solid white;
width:200px;
height:200px;
background-color:#7f7f7f;
}
</style>
</head>
<body>
<divid="one"></div>
<inputtype="button"value="红"id="red">
<inputtype="button"value="橙"id="orange">
<inputtype="button"value="黄"id="yellow">
<inputtype="button"value="绿"id="green">
<inputtype="button"value="蓝"id="blue">
<inputtype="button"value="靛"id="indigo">
<inputtype="button"value="紫"id="purple">
<script>
var one =document.getElementById("one");
var red=decoment.getElementById("red");
var orange=decoment.getElementById("orange");
var yellow=decoment.getElementById("yellow");
var green=decoment.getElementById("green");
var blue=decoment.getElementById("blue");
var indigo=decoment.getElementById("indigo");
var purple=decoment.getElementById("purple");
red.onclick=function(){
one.style="background-color:red";
};
orange.onclick=function(){
one.style="background-color:orange";
};
yellow.onclick=function(){
one.style="background-color:yellow";
};
green.onclick=function(){
one.style="background-color:green";
};
blue.onclick=function(){
one.style="background-color:blue";
};
indigo.onclick=function(){
one.style="background-color:indigo";
};
purple.onclick=function(){
one.style="background-color:purple";
};
</script>
</body>
</html>
扫一扫
1707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
