Giả lớp fullscreen

Giả lớp fullscreen xác định kiểu cho các phần tử ở chế độ toàn màn hình của trình duyệt. Để chuyển từ chế độ hiển thị trang tiêu chuẩn sang chế độ toàn màn hình và ngược lại, bạn cần nhấn phím F11 trên bàn phím.

Cú pháp

bộ chọn:fullscreen {
	
}

Ví dụ

Hãy nhấp để mở rộng một phần tử có văn bản ở chế độ toàn màn hình và thay đổi màu nền của nó:

<div id="txt">
	Toàn màn hình
</div>
<p>
	<button onclick="fullScreen()">Nhấp</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'); // Lấy phần tử
	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();
}

Xem thêm

giả lớp :default,
xác định kiểu cho các phần tử mặc định