Skip to content
Related Articles

Related Articles

Improve Article

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=
    <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 45.0
  • Internet Explorer 11.0
  • Firefox 47.0
  • Opera 15.0
  • Safari 5.1

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :