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

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

Σύνταξη

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

Παράδειγμα

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

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

Δείτε επίσης

η ψευδοκλάση :default,
που ορίζει το στυλ των στοιχείων από προεπιλογή