<html> <head> < Title > JS designated region fullscreen </ title > <style> #fulldiv { background: #fff; width: 100%; text-align: center; height: 100%; } </style> </head> <body> < H1 of > designated test area fullscreen </ h1 of > < Button ID = "BTN" > Full Screen button </ Button > <div id="content-main"> <img src="C:\Users\guobin\Desktop\IMG_3163.PNG" /> </div> </body> <script> was fullscreen = false ; let btn = document.getElementById('btn'); let fullarea = document.getElementById('content-main') btn.addEventListener('click',function(){ IF (Fullscreen) { // Exit full screen IF (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } The else { // enter full-screen IF (fullarea.requestFullscreen) { fullarea.requestFullscreen(); } else if (fullarea.webkitRequestFullScreen) { fullarea.webkitRequestFullScreen(); } else if (fullarea.mozRequestFullScreen) { fullarea.mozRequestFullScreen (); } else if (fullarea.msRequestFullscreen) { // IE11 fullarea.msRequestFullscreen (); } } fullscreen = !fullscreen; }) </script> </html>