<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
*{
padding:0;
margin:0;
}
.classBox{
width:600px;
height:600px;
border:2px solid black;
background-color: #EDEAEA;
margin: 0 auto;
}
.btn{
padding:20px;
font-size: 24px;
}
.boxer{
width:90px;
height:90px;
background-color: #6066C5;
margin:10px;
vertical-align: middle;
display: inline-block;
}
.color1{
background-color:#E51DDE;
}
.color2{
background-color:#7598EB;
}
.color3{
background-color: #ADF4AE;
}
.color4{
background-color:#BAD5F9;
}
.cbox{
width:40px;
height:40px;
display:inline-block;
padding:10px;
text-align: center;
line-height: 40px;
margin:10px;
}
.colorBar{
width:640px;
padding:20px;
overflow: auto;
text-align: center;
margin: 0 auto;
}
.cactive{
border:2px solid black;
width:36px;
height:36px;
}
</style>
</head>
<body>
<div id="idBox" class="classBox">
<div class="boxer"></div>
<div class="boxer"></div>
<div class="boxer"></div>
</div>
<div class="colorBar">
<div class="cbox color1" data-color="1">1</div>
<div class="cbox color2" data-color="2">2</div>
<div class="cbox color3" data-color="3">3</div>
<div class="cbox color4" data-color="4">4</div>
</div>
<script>
let box = document.querySelector('#idBox');
document.querySelector('.colorBar').addEventListener('click', function(e){
if(!e.target.classList.contains("cbox"))
return;
let colorData = e.target.dataset.color;
let newObj;
//let newColor = `color${colorData}`;
//alert(colorObj);
if (colorData == 1)
newObj = `<div class="boxer color1"></div>`;
else if (colorData == 2)
newObj = `<div class="boxer color2"></div>`;
else if (colorData == 3)
newObj = `<div class="boxer color3"></div>`;
else if (colorData == 4)
newObj = `<div class="boxer color4"></div>`;
box.innerHTML += newObj;
//alert(`color${colorData}`);
})
document.querySelector('#idBox').addEventListener('click', function(e){
let obj = event.target;
if(obj.tagName=="DIV" && obj.id!="idBox")
obj.remove();
})
</script>
</body>
</html>