本文實例講述了JS實現指定區域的全屏顯示功能。分享給大家供大家參考，具體如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>m.survivalescaperooms.com js指定區域全屏</title> <style> #fulldiv { background: #fff; width: 100%; text-align: center; height: 100%; } </style> </head> <body> <h1>指定區域全屏測試</h1> <button id="btn">全屏按鈕</button> <div id="fulldiv"> <h1>這里是全屏顯示的內容</h1> </div> </body> <script> var fullscreen = false; let btn = document.getElementById('btn'); let fullarea = document.getElementById('fulldiv') btn.addEventListener('click',function(){ if (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 (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>
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
