<!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
>