The window supports the full-screen interface by using web API. We can activate or deactivate the full-screen mode of the screen. The fullscreen API provides methods to present a specific element in a full-screen mode.
Approach:
- The onclick event will trigger the activate() method which will be for activating the full screen.
- The same will be applied for exiting from the full screen.
<button onclick="activate(document.documentElement);">
Go To Full Screen
</button>
<button onclick="deactivate();">
Leave Full Screen
</button>
Example: The following code uses the requestFullscreen() method. The same is done for exiting full screen by using exitFullscreen() method.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta name="viewport" content=         "width=device-width, initial-scale=1.0" /> </head>   <body>     <h1 style="color: green">GeeksForGeeks</h1>       <h2>Window fullscreen property</h2>       <button onclick="activate(document.documentElement);">         Go To Full Screen     </button>       <button onclick="deactivate();">Leave FullScreen</button>       <script>           // Function for full screen activation         function activate(ele) {             if (ele.requestFullscreen) {                 ele.requestFullscreen();             }         }           // Function for full screen activation         function deactivate() {             if (document.exitFullscreen) {                 document.exitFullscreen();             }         }     </script> </body>   </html> |
Output:
activate or deactivate full screen
Application:
-
You can apply it to any element in your website
-
It will help to execute the full screen.
