Η ψευδοκλάση fullscreen

Η ψευδοκλάση fullscreen ορίζει το στυλ στοιχείων για λειτουργία πλήρους οθόνης του προγράμματος περιήγησης. Για να μεταβείτε από την τυπική λειτουργία εμφάνισης της σελίδας σε πλήρη οθόνη και πίσω πρέπει να πατήσετε το πλήκτρο F11 στο πληκτρολόγιο.

Σύνταξη

cssεπιλογέας:fullscreen {
  
}

Παράδειγμα

Ας κάνουμε κλικ για να αναπτύξουμε το στοιχείο με κείμενο σε πλήρη οθόνη και ας αλλάξουμε το χρώμα του φόντου του:

html<div id="txt">
  Full screen
</div>
<p>
  <button onclick="fullScreen()">Κλικ</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'); // Παίρνουμε το στοιχείο
  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();
}

Результат:

Δείτε επίσης