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:
Console Output: If the full-screen mode is activated by clicking the button.
Console Output: If the full-screen mode is not activated.
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