Pseudo-classe CSS :fullscreen

:fullscreen {
  /* ... */
}

<div class="element">
  <h1>Démonstration du MDN Web Docs : la pseudo-classe :fullscreen</h1>

  <p>
    Cette démonstration utilise la pseudo-classe <code>:fullscreen</code> pour
    changer automatiquement le style d'un bouton utilisé pour activer et
    désactiver le mode plein écran, entièrement en utilisant CSS.
  </p>

  <button class="toggle">Activer/Désactiver le plein écran</button>
</div>

.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

document.querySelector(".toggle").addEventListener("click", (event) => {
  if (document.fullscreenElement) {
    // Si un élément est en plein écran, quitter le plein écran.
    document.exitFullscreen();
    return;
  }
  // Mettre l'élément .element en plein écran.
  document.querySelector(".element").requestFullscreen();
});

.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  padding: 1.2em;
}