js点击按钮实现全屏效果-蒲公英云

js点击按钮实现全屏效果

多读多写多记录，多学多练多思考。—————- Grapefruit.Banuit Gang(香柚帮)

       写一个点击按钮实现全屏的效果，话不多说，直接上代码：
       首先准备一个按钮，写上点击事件
<body>
        <!--准备一个按钮-->
        <button onclick="handleFullScreen()">全屏</button>
    </body>
         下面写点击事件的逻辑：
<script>
        //定义一个变量进行判断，默认false 非全屏状态
        let exitFullscreen = false
        // 全屏事件
        function handleFullScreen() {
            let element = document.documentElement;
            if(this.fullscreen) {
                if(document.exitFullscreen) {
                    document.exitFullscreen();
                } else if(document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if(document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if(element.requestFullscreen) {
                    element.requestFullscreen();
                } else if(element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if(element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
        }
    </script>
           就这么多，希望能帮助到有需要的朋友！！！