<!DOCTYPE html>
<html lang="es">
<head>
<style>
.container { text-align: center;
margin: 40px auto;
max-width: 700px;
}
.element { padding: 10px;
height: 250px;
width: 100%;
background-color: skyblue;
}
.element p { color: white;
font-size: 3em;
}
.element:fullscreen { background-color: #e4708a;
width: 100vw;
height: 100vh;
}
button {margin-top:20px;} </style>
</head>
<body>
<div class="container">
<div class="element" id="element">
<p>Pondremos a pantalla completa este div, y cambiaremos su color de fondo con estilos.</p>
</div>
<button>Ver a pantalla completa</button>
</div>
</body>
</html>
<script>
document.querySelector('.container button').addEventListener("click", function() {this.previousElementSibling.requestFullscreen()});</script>
Crear cuenta
Comentarios sobre la versión: 1 (1)
Muchas gracias. muy práctico