js实现隐藏显示

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>的撒的撒</title>
       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
       <style type="text/css">
           .show{
               width: 90px;
               height: 90px;
               background-color: red;
           }
           .show{
               display: block;
           }
           .hide{
               display: none;
           }
       </style>
   </head>
   <body>
       <button type='button' id='btn'>隐藏</button>
       <div id="demo" class="show">

       </div>
       <script type="text/javascript">
           var btn = document.getElementById('btn');

           var div = document.getElementById('demo');

           btn.onclick = function(){
               if(this.innerHTML === '隐藏'){
                   this.innerHTML = '显示';
                   div.className = 'hide';
               }else{
                   this.innerHTML = '隐藏';
                   div.className = 'show';
               }
           }
       </script>

   </body>
</html>

相关文章