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
Selektor:fullscreen {
}
Beispiel
Lassen Sie uns ein Element mit Text per Klick in den Vollbildmodus versetzen und seinen Hintergrund umfärben:
<div id="txt">
Full screen
</div>
<p>
<button onclick="fullScreen()">Click</button>
</p>
body {
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;
}
function 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
-
die Pseudoklasse
:default,
die den Stil für Elemente standardmäßig festlegt
