Pseudoclass fullscreen

Pseudoclass fullscreen mengatur gaya untuk elemen dalam mode layar penuh browser. Untuk beralih dari mode tampilan halaman standar ke mode layar penuh dan sebaliknya, Anda perlu menekan tombol F11 pada keyboard.

Sintaks

cssselector:fullscreen {
  
}

Contoh

Mari kita perluas elemen dengan teks ke mode layar penuh saat diklik dan ubah warna latar belakangnya:

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'); // Mendapatkan elemen
  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();
}

Результат:

Lihat juga