JavaScript-点击任意点显示隐藏-白红宇

JavaScript-点击任意点显示隐藏

阅读量：6225 次

发布时间：2019-06-21

本文共 4625 字，大约阅读时间需要 15 分钟。

//开/关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");//Widthvar w100=document.getElementById("w100");var w200=document.getElementById("w200");var w300=document.getElementById("w300");//Heightvar h100=document.getElementById("h100");var h200=document.getElementById("h200");var h300=document.getElementById("h300");//BorderSizevar b1=document.getElementById("b1");var b2=document.getElementById("b2");var b3=document.getElementById("b3");//Border-colorvar 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.οnclick=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.οnclick=function(){        sl.removeAttribute("style");        console.log(centerBox.removeAttribute("style"));    };};off.οnclick=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.οnclick=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-colorred.οnclick=function () {    sl.style.background='red';};blue.οnclick=function(){    sl.style.background='blue';};yellow.οnclick=function(){    sl.style.background='yellow';};//Widthw100.οnclick=function(){    sl.style.width='100'+'px';};w200.οnclick=function(){    sl.style.width='200'+'px';};w300.οnclick=function(){    sl.style.width='300'+'px';};//Heighth100.οnclick=function(){    sl.style.height='100'+'px';};h200.οnclick=function(){    sl.style.height='200'+'px';};h300.οnclick=function(){    sl.style.height='300'+'px'};//BorderSizeb1.οnclick=function(){    sl.style.borderWidth='1'+'px';};b2.οnclick=function(){    sl.style.borderWidth='5'+'px'};b3.οnclick=function(){    sl.style.borderWidth='10'+'px';};//Border-colorfs.οnclick=function(){    sl.style.borderColor='#f7c2dc';};green.οnclick=function(){    sl.style.borderColor='green';};cs.οnclick=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;}