Pseudokelas fullscreen

Pseudokelas fullscreen menetapkan gaya untuk elemen dalam mod skrin penuh penyemak imbas. Untuk beralih dari mod paparan halaman standard ke mod skrin penuh dan sebaliknya, anda perlu menekan kekunci F11 pada papan kekunci.

Sintaks

csspemilih:fullscreen {
  
}

Contoh

Mari kita kembangkan elemen dengan teks dalam mod skrin penuh pada klik dan ubah warna latarnya:

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'); // Dapatkan 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