//开/关

var only = document.getElementById('only');

var centerBox = document.getElementById('centerBox');

var off_2=document.getElementById("off_2");

//获取实际宽高

// var centerW=centerBox.offsetWidth;

// var centerH=centerBox.offsetHeight;

// var off=document.getElementById('off');

//颜色

var red = document.getElementById("red");

var blue = document.getElementById("blue");

var yellow=document.getElementById("yellow");

//Width

var w100=document.getElementById("w100");

var w200=document.getElementById("w200");

var w300=document.getElementById("w300");

//Height

var h100=document.getElementById("h100");

var h200=document.getElementById("h200");

var h300=document.getElementById("h300");

//BorderSize

var b1=document.getElementById("b1");

var b2=document.getElementById("b2");

var b3=document.getElementById("b3");

//Border-color

var fs=document.getElementById("fs");

var green=document.getElementById("green");

var cs=document.getElementById("cs");

//重置

var reset=document.getElementById("reset");

//方法一：通过if...else....语句判断方法

// function show() {

//     if (centerBox.style.display == 'none') {

//         centerBox.style.display = 'block';

//     }else {

//         centerBox.style.display='none';

//     }

//

// };

// 方法三：通过缩写判断方法；

// function show() {

//     centerBox.style.display = (centerBox.style.display=="none"?"block":"none");

// };

//方法四：匿名函数

only.onclick=function(){

    // off.style.display = (off.style.display=="none"?"block":"none");

    // centerBox.style.display = (off.style.display=="none"?"block":"none");

    off.style.display='block';

    centerBox.style.display = 'block';

    //垂直居中-自动获取宽高

    //重置

    var reset=document.getElementById("reset");

    reset.onclick=function(){

        sl.removeAttribute("style");

        console.log(centerBox.removeAttribute("style"));

    };

};

off.onclick=function(){

    // centerBox.style.display = (off.style.display=="none"?"block":"none");

    // off.style.display = (off.style.display=="none"?"block":"none");

    centerBox.style.display='none';

    off.style.display='none';

};

off_2.onclick=function(){

    // centerBox.style.display = (off.style.display=="none"?"block":"none");

    // off.style.display = (off.style.display=="none"?"block":"none");

    centerBox.style.display='none';

    off.style.display='none';

};

//Background-color

red.onclick=function () {

    sl.style.background='red';

};

blue.onclick=function(){

    sl.style.background='blue';

};

yellow.onclick=function(){

    sl.style.background='yellow';

};

//Width

w100.onclick=function(){

    sl.style.width='100'+'px';

};

w200.onclick=function(){

    sl.style.width='200'+'px';

};

w300.onclick=function(){

    sl.style.width='300'+'px';

};

//Height

h100.onclick=function(){

    sl.style.height='100'+'px';

};

h200.onclick=function(){

    sl.style.height='200'+'px';

};

h300.onclick=function(){

    sl.style.height='300'+'px'

};

//BorderSize

b1.onclick=function(){

    sl.style.borderWidth='1'+'px';

};

b2.onclick=function(){

    sl.style.borderWidth='5'+'px'

};

b3.onclick=function(){

    sl.style.borderWidth='10'+'px';

};

//Border-color

fs.onclick=function(){

    sl.style.borderColor='#f7c2dc';

};

green.onclick=function(){

    sl.style.borderColor='green';

};

cs.onclick=function(){

    sl.style.borderColor='#fb7703';

};

// centerBox.style.marginLeft='-'+centerW+'px';

//

// centerBox.style.marginTop='-'+centerH+'px';

#only{

  width: 150px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  border-radius: 10px;

  background: red;

  margin: 5px 0;

  color: #fff;

  font-weight: bold;

  cursor: pointer;

}

#sl{

  width: 147px;

  height: 147px;

  border: 3px solid #3c3c3c;

  background: #0a1015;

}

#off{

    position: absolute;

    top:;

    left:;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.5);

  }

#centerBox{

  position: absolute;

  top: 50%;

  left: 50%;

  width: 272px;

  height: 317px;

  margin-top: -158.5px;

  margin-left: -136px;

  border: 2px solid #0a1015;

  background: yellow;

  padding: 8px;

  box-sizing: border-box;

}

.Tit{

  width: 60px;

  height: 35px;

  line-height: 35px;

  display: inline-block;

  margin: 5px 0;

  text-align: center;

  font-weight: bold;

}

.cl{

  width: 50px;

  height: 33px;

  line-height: 33px;

  display: inline-block;

  border: 2px solid #3c3c3c;

  text-align: center;

  margin: 5px 5px;

  cursor: pointer;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="DOMSTYLE.css">

    <title>Title</title>

</head>

<body>

<div id="only">点击进入选项</div>

<div id="sl"></div>

<div id="off" style="display: none;"></div>

<div id="centerBox" style="display: none">

    <div><span class="Tit">颜色：</span><span id="red" class="cl">红色</span><span id="blue" class="cl">蓝色</span><span id="yellow" class="cl">黄色</span></div>

    <div><span class="Tit">宽度：</span><span id="w100" class="cl">100</span><span id="w200" class="cl">200</span><span id="w300" class="cl">300</span></div>

    <div><span class="Tit">高度：</span><span id="h100" class="cl">100</span><span id="h200" class="cl">200</span><span id="h300" class="cl">300</span></div>

    <div><span class="Tit">边框：</span><span id="b1" class="cl">1</span><span id="b2" class="cl">3</span><span id="b3" class="cl">6</span></div>

    <div><span class="Tit">框色：</span><span id="fs" class="cl">粉色</span><span id="green" class="cl">绿色</span><span id="cs" class="cl">橙色</span></div>

    <div><span class="Tit"></span><span id="reset" class="cl">重置</span> <span id="off_2" class="cl">关闭</span></div>

</div>

<script src="DOME06.js"></script>

</body>

</html>