<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap{
            width: 100px;
            height: 100px;
            background-color: #61b0ff;
        }
    </style>
</head>
<body>
<div id="wrap"></div>
<button id="btn">点击变换</button>
<script>
    let oWrap = document.getElementById('wrap'),
        oBtn = document.getElementById('btn');
    // oBtn.onclick = function () {
    //     if (oWrap.style.display === 'none'){
    //         oWrap.style.display = 'block'
    //     }
    //     else{
    //         oWrap.style.display = 'none'
    //     }
    // };



    // let oOn = true; //定义了一个布尔值变量，用来表示盒子的状态
    // oBtn.onclick = function () {
    //     if ( oOn===true ){
    //         oWrap.style.display = 'none';
    //         oOn = false; //把表示变为false
    //     }
    //     else{
    //         oWrap.style.display = 'block';
    //         oOn = true; //把表示变为true
    //     }
    // };


    // let oOn = true; //定义了一个布尔值变量，用来表示盒子的状态
    // oBtn.onclick = function () {
    //     if ( oOn ){
    //         oWrap.style.display = 'none';
    //     }
    //     else{
    //         oWrap.style.display = 'block';
    //     }
    //     oOn = !oOn;
    // };


    let oOn = true; //定义了一个布尔值变量，用来表示盒子的状态
    oBtn.onclick = function () {
        oWrap.style.display = oOn?'none':'block';
        oOn = !oOn;
    };

</script>
</body>
</html>