Thuộc tính fullscreenElement trong HTML DOM

Thuộc tính fullscreenElement trả về phần tử đang hiển thị ở chế độ toàn màn hình, hoặc null nếu không có phần tử nào. Cũng cần vendor prefix cho các trình duyệt cũ.

Cú pháp

document.fullscreenElement

Ví dụ

Mở ảnh toàn màn hình và kiểm tra element:

<!DOCTYPE html> <html> <head> 
<script> 
  function FullscreenEle() { 
    console.log(document.fullscreenElement || document.webkitFullscreenElement); 
  } 
  setTimeout(FullscreenEle, 8000); 
  function EnableFullScreen() { 
    var elem = document.getElementById("image"); 
    if (elem.requestFullscreen) 
      elem.requestFullscreen(); 
    else if (elem.webkitRequestFullscreen) 
      elem.webkitRequestFullscreen(); 
    else 
      console.log('Không thể vào toàn màn hình'); 
  } 
</script> </head> 
<body> 
<h1>Học Blockchain</h1> 
<img id="image" src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg"> 
<br> 
<button onclick="EnableFullScreen()">Vào toàn màn hình</button> 
</body> </html>

Kết quả

Trang ban đầu với ảnh và nút:

Sau khi nhấn nút, ảnh mở toàn màn hình:

Giải thích

• Dùng requestFullscreen() trên element để vào toàn màn hình.
• Dùng setTimeout gọi FullscreenEle() sau 8 giây vì không thể click khi đã toàn màn hình.
• FullscreenEle() log element đang toàn màn hình ra console.

Vendor prefix cần thiết

• requestFullscreen: Firefox mozRequestFullScreen, IE/Edge msRequestFullscreen
• fullscreenElement: Firefox mozFullScreenElement, IE/Edge msFullscreenElement