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

pemilih:fullscreen {
	
}

Contoh

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

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

pseudokelas :default,
yang menetapkan gaya untuk elemen secara lalai