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

selector:fullscreen {
	
}

Contoh

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

<div id="txt">
	Full screen
</div>
<p>
	<button onclick="fullScreen()">Klik</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'); // 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

pseudoclass :default,
yang mengatur gaya untuk elemen secara default