通过点击设置div的样式(颜色,高度,宽度)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#box{
border: 2px solid black;
height: 100px;
width: 100px;
}
.ti{
margin-bottom: 20px;
}
.mask{
display: none;
background:dimgrey;
position: absolute;
left: 300px;
top: 300px;
border: 10px solid black;
padding: 20px;
}
.mask .setlist{
width: 300px;
height: 200px;
}
.mask ul{
list-style: none;
padding: 0px;
}
.mask .setlist li{
width: 300px;
height: 40px;
line-height: 28px;
font-size: 15px;
}
.mask .setlist .title{
width: 100px;
height: 30px;
line-height: 30px;
font-size: 15px;
float: left;
}
#red{
height: 26px;
width: 30px;
float: left;
text-align: center;
margin-right: 10px;
border: 2px solid black;
}
#yellow{
height: 26px;
width: 30px;
float: left;
text-align: center;
margin-right: 10px;
border: 2px solid black;
}
#blue{
height: 26px;
width: 30px;
float: left;
text-align: center;
margin-right: 10px;
border: 2px solid black;
}
#w200 ,#w300, #w400 ,#h200,#h300,#h400{
height: 26px;
width: 30px;
float: left;
text-align: center;
margin-right: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="ti">
<p class="name">点击改变当前的样式</p>
<input type="submit" id="btn" value="点击" >
</div>
<div id="box"></div>
<div id="maskbox" class="mask">
<div class="select">
<ul class="setlist">
<li>
<span class="title">请选择背景色</span>
<span id='red'>红</span>
<span id="yellow" >黄</span>
<span id="blue">蓝</span>
</li>
<li>
<span class="title"> 请选择宽</span>
<span id="w200">200</span>
<span id="w300">300</span>
<span id="w400">400</span>
</li>
<li>
<span class="title">请选择长</span>
<span id="h200">200</span>
<span id="h300">300</span>
<span id="h400">400</span>
</li>
<li>
<input type="submit" value="恢复" id="huifu">
<input type="submit" value="确定" id="sure">
</li>
</ul>
</div>
</div>
<script>
var btn=document.getElementById('btn');
var maskbox =document.getElementById('maskbox');
console.log(maskbox)
btn.onclick = function(){
maskbox.style.display='block';
}
var red =document.getElementById('red');
var yellow=document.getElementById('yellow');
var blue =document.getElementById('blue');
var w200 =document.getElementById('w200');
var w300 =document.getElementById('w300');
var w400 =document.getElementById('w400');
var h200 =document.getElementById('h200');
var h300 =document.getElementById('h300');
var h400 =document.getElementById('h400');
var box=document.getElementById('box');
red.onclick = function(){
box.style.background = 'red';
}
yellow.onclick = function(){
box.style.background = 'yellow';
}
blue.onclick = function(){
box.style.background = 'blue';
}
w200.onclick =function(){
box.style.width='200px';
}
w300.onclick =function(){
box.style.width='300px';
}
w400.onclick =function(){
box.style.width='400px';
}
h200.onclick =function(){
box.style.height='200px';
}
h300.onclick =function(){
box.style.height='300px';
}
h400.onclick =function(){
box.style.height='400px';
}
var sure = document.getElementById('sure');
sure.onclick = function(){
maskbox.style.display='none';
}
var huifu =document.getElementById('huifu');
huifu.onclick = function(){
box.style.cssText='width:100px;height:100px;background:white;';
}
</script>
</body>
</html>