JavaScript-点击任意点显示隐藏

Posted 2020-10-19 极速小乌龟

//开/关
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: 0;
    left: 0;
    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>