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

cssbộ 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ó:

html<div id="txt">
  Toàn màn hình
</div>
<p>
  <button onclick="fullScreen()">Nhấp</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'); // 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