Pseudoklasse fullscreen

De pseudoklasse fullscreen bepaalt de stijl van elementen voor de volledig schermmodus van de browser. Om van de standaard weergavemodus van de pagina naar de volledig schermmodus te gaan en terug, moet je op de toets F11 op het toetsenbord drukken.

Syntaxis

cssselector:fullscreen {
  
}

Voorbeeld

Laten we bij een klik het element met tekst uitvouwen naar de volledig schermmodus en de achtergrondkleur veranderen:

html<div id="txt">
  Full screen
</div>
<p>
  <button onclick="fullScreen()">Klik</button>
</p>

cssbody {
  margin: 0;
}
#txt {
  padding: 10px;
  background: #467CBC;
  color: white;
  width: 200px;
}
#txt:-webkit-full-screen {
  background: #E37D76;
}
#txt:-moz-full-screen {
  background: #E37D76;
}
#txt:-ms-fullscreen {
  background: #E37D76;
}

javascriptfunction fullScreen() {
  let elem = document.getElementById('txt'); // We krijgen het element
  if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); // Chrome, Opera, Safari
  else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen(); // Firefox
  else if (elem.msRequestFullscreen) elem.msRequestFullscreen(); // Internet Explorer, Edge
  else if (elem.requestFullscreen) elem.requestFullscreen();
}

Результат:

Zie ook