网页全屏与缩放

.box {
   background-color: white;
  }

<div class="box">
      <img src="./img/全屏 .png" alt="" onclick="full_screen()">
      <p>点击图片放大、再次点击缩小，有判断其他网页的兼容，box是整个屏幕最大的div，这里box我加了个背景白色，不然的话就变成黑色了（不懂怎么调--！）</p>
    </div>

<script>
      // 全屏与缩小
       function full_screen(){
              var element= document.getElementsByClassName("box")[0]; 
              if (this.isFullscreen()) { // 全屏
                exitFullScreen();
            } else {
                if (element.requestFullscreen) {
                  element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                  element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                  element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                  element.msRequestFullscreen();  // IE11
                }
            }
          }
        // 退出全屏
        function exitFullScreen () {
            let exitFullScreen = document.exitFullScreen || 
            document.mozCancelFullScreen || 
            document.webkitExitFullscreen || 
            document.msExitFullscreen;
            if (exitFullScreen) {
              exitFullScreen.call(document);
            }
         }
        // 判断是否全屏
        function isFullscreen () {
            return document.fullscreenElement ||
              document.msFullscreenElement ||
              document.mozFullScreenElement ||
              document.webkitFullscreenElement || false;
         }
    </script>