HTML | DOM fullscreenElement Property

Last Updated : 24 Jul, 2019

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:

<!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= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    <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> 