Pseudoklasse fullscreen

Die Pseudoklasse fullscreen legt den Stil für Elemente im Vollbildmodus des Browsers fest. Um vom Standardanzeigemodus der Seite in den Vollbildmodus und zurück zu wechseln, muss man die Taste F11 auf der Tastatur drücken.

Syntax

cssSelektor:fullscreen {
  
}

Beispiel

Lassen Sie uns ein Element mit Text per Klick in den Vollbildmodus versetzen und seinen Hintergrund umfärben:

html<div id="txt">
  Full screen
</div>
<p>
  <button onclick="fullScreen()">Click</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'); // Element abrufen
  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();
}

Результат:

Siehe auch