首頁 > 開發者 > JavaScript
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
