Código de JavaScript - Poner un elemento a pantalla completa y cambiar su color con estilos

Pos: 13

Val: 211

Ha mantenido su posición en JavaScript (en relación al último mes)

Poner un elemento a pantalla completa y cambiar su color con estilos

JavaScript

(1)

Publicado el 15 de Febrero del 2020 por Joan (121 códigos)

982 visualizaciones desde el 15 de Febrero del 2020

Este código muestra como poner un elemento de la página a pantalla completa y cambiar el color de fondo del elemento con el estilo :fullscreen

elemento-pantalla-completa

1
(1)

Publicado el 15 de Febrero del 2020

gráfica de visualizaciones de la versión: 1

983 visualizaciones desde el 15 de Febrero del 2020

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

Comentarios sobre la versión: 1 (1)

Mauricio

5 de Noviembre del 2021

Esto estaba buscando, para poder desarrollar una evaluación en Pc y que los estudiantes no puedan realizar busquedas en el navegador.

Muchas gracias. muy práctico

Responder