js图片全屏

html,
        body {height:100%;
        }
        img {display:block;margin:100px auto 0;width:900px;cursor:pointer;
        }
        /*webkit和IE在元素进入全屏后，会保持元素原有的尺寸，所以需要通过css伪类进行设置 */img:-webkit-full-screen{width:100%;height:100%;
        }
        img:-ms-fullscreen {width:100%;height:100%;
        }

<img id="target"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530343927072&di=ba9a25dc1d88a14556abf44106a32a4f&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe9%2F3d%2Ffc%2Fe93dfc90c7406e68dd72afac6dda0357.jpg"alt="">

window.onload = function() {
            let img = document.querySelector('#target');
            //监听事件 注意不同浏览器的兼容性问问题

　　　　　　　//错误事件为：fullscreenerror ， 同样注意前缀
            document.addEventListener('fullscreenchange' , function() {
                console.log('全屏切换！')
            })
            document.addEventListener('webkitfullscreenchange' , function() {
                console.log('全屏切换！')
            })
            document.addEventListener('mozfullscreenchange' , function() {
                console.log('全屏切换！')
            })
            document.addEventListener('MSFullscreenChange' , function() {
                console.log('全屏切换！')
            })

　　　　　　　//图片点击切换全屏
            if(isFUllScreenEnabled()) {
                img.addEventListener('click', function() {
                    if(hasFullScreenElement()) {
                        exitFullScreen();
                    } else{
                        setFullScreen(img);
                    }
                });
            } else{
                console.log('此浏览器不支持全屏');
            }
        }
        
        
        //判断浏览器是否支持全屏
        functionisFUllScreenEnabled() {
            return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled ||document.msFullscreenEnabled;
        }

        //判断是否有已全屏的元素
        functionhasFullScreenElement() {
            return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement ||document.msFullscreenElement
        }

        //将目标元素设置为全屏展示
        functionsetFullScreen(target) {
            if(target.requestFullscreen) {
                target.requestFullscreen();
            }
            if(target.webkitRequestFullscreen) {
                target.webkitRequestFullscreen();
            }
            if(target.mozRequestFullScreen) {
                target.mozRequestFullScreen();
            }
            if(target.msRequestFullscreen) {
                target.msRequestFullscreen();
            }
        }
        
        //文档退出全屏
        functionexitFullScreen() {
            if(document.exitFullscreen) {
                document.exitFullscreen();
            }
            if(document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            if(document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            if(document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }