JavaScript——点击按钮使div变色

来源：互联网发布：淘宝店铺详情尺寸编辑：程序博客网时间：2024/05/28 18:43

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

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>

0 0