本文實例講述了JS實現指定區域的全屏顯示功能。分享給大家供大家參考，具體如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.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>感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.Vevb.com/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
