In this shot, we will learn how to get into full screen mode using the DOM requestFullscreen() method. This method is applied on the root element of the document that is <html>.
To get out of full screen mode, there is another method that will exit the full screen. We will use the exitFullscreen() method on the document object.
Let’s try to make our screen turn full screen after we click the button.
In line 5, we have a paragraph tag with some text to display.
In line 7, we wrote a button tag that has a function big() binded with the onclick event.
In line 8, we have another button element that has a function exit() binded with the onclick event.
In line 11, document.documentElement returns the root element that is <html>.
In line 12, we defined the function big(). In this method, we will call the method requestFullscreen() on the root element <html>.
In line 16, we defined the function exit(). In this method, we will call the method exitFullscreen() on the document, which will close the full screen if the document is in full screen.
The above code will not work on the Educative platform. Please create a simple file with the .html extension and paste this code. Open this file in your browser.
Now, if we click the Fullscreen button, the window size gets bigger. When we are in full screen mode and click Exit Fullscreen, it makes the window return to its original size.