Skip to content
Related Articles

Related Articles

HTML | DOM fullscreenElement Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 2022

The fullscreenElement property in HTML is used to return the element that is currently in fullscreen. This property may require specific prefixes to work with different browsers. 

Syntax:

document.fullscreenElement

Return Value: Returns the element that is currently in full-screen mode, or null if full-screen mode is not available. 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>fullscreenElement method</title>
</head>
 
<body>
    <h1 style="color: green">GeeksForGeeks</h1>
    <p><b>fullscreenElement method</b></p>
    <p>The current fullscreen element will
       appear in the console after 5 seconds.</p>
 
    <img id="image" src=
    <br>
    <button onclick="goFullScreen();">Go fullscreen</button>
    <script>
 
        /* Log the element currently in fullscreen */
        function checkFullscreenElement() {
            console.log(
                /* Standard syntax */
                document.fullscreenElement ||
 
                /* Chrome, Safari and Opera syntax */
                document.webkitFullscreenElement ||
 
                /* Firefox syntax */
                document.mozFullScreenElement ||
 
                /* IE/Edge syntax */
                document.msFullscreenElement
            )
        }
 
        /* Call this function after 5 seconds,
        as we cannot click any button to execute
        this function while in fullscreen */
        setTimeout(checkFullscreenElement, 5000);
 
        /* Go fullscreen */
        function goFullScreen() {
            if (
                /* Standard syntax */
                document.fullscreenEnabled ||
 
                /* Chrome, Safari and Opera syntax */
                document.webkitFullscreenEnabled ||
 
                /* Firefox syntax */
                document.mozFullScreenEnabled ||
 
                /* IE/Edge syntax */
                document.msFullscreenEnabled
            ) {
                elem = document.querySelector('#image');
 
                /* Try to go Fullscreen */
                elem.requestFullscreen();
            } else {
                console.log('Fullscreen is not available currently.')
            }
        }
    </script>
</body>
 
</html>

Output:

 base-output 

Console Output: If the full-screen mode is activated by clicking the button.

 fullscreen-elem 

Console Output: If the full-screen mode is not activated.

 fullscreen-null 

Supported Browsers: The browser supported by fullscreenElement property are listed below:

  • Google Chrome 71.0 and above
  • Edge 79.0 and above
  • Internet Explorer 11.0 and above
  • Firefox 64.0 and above
  • Opera 58.0 and above
  • Safari 6.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!