La propiedad fullscreenElement en HTML se usa para devolver el elemento que está actualmente en pantalla completa. Esta propiedad puede requerir prefijos específicos para funcionar con diferentes navegadores.
Sintaxis:
document.fullscreenElement
Valor devuelto: Devuelve el elemento que está actualmente en modo de pantalla completa, o nulo si el modo de pantalla completa no está disponible.
Ejemplo:
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=
"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>
Producción:
Salida de consola: si se activa el modo de pantalla completa al hacer clic en el botón.
Salida de Consola: Si el modo de pantalla completa no está activado.
Navegadores compatibles: los navegadores compatibles con la propiedad fullscreenElement se enumeran a continuación:
- Google Chrome 71.0 y superior
- Edge 79.0 y superior
- Internet Explorer 11.0 y superior
- Firefox 64.0 y superior
- Ópera 58.0 y superior
- Safari 6.0 y superior
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA