Thuộc tính HTML DOM fullscreenElement được sử dụng để trả về phần tử hiện được hiển thị ở chế độ toàn màn hình. Nó sẽ trả về null nếu phần tử đã cho không ở chế độ toàn màn hình.
Cú pháp
Sau đây là cú pháp cho thuộc tính fullscreenElement -
document.fullscreenElement
Chúng ta hãy xem một ví dụ về thuộc tính fullscreenElement -
Lưu ý - Ví dụ này chỉ có cú pháp tiêu chuẩn và tiền tố trình duyệt cho Chrome, Safari và Opera. Đối với tiền tố trình duyệt của bạn, hãy kiểm tra phần cuối cùng.
Ví dụ
Hãy để chúng tôi xem một ví dụ -
<!DOCTYPE html>
<html>
<head>
<script>
function FullscreenEle() {
console.log(document.fullscreenElement || /*Standard Syntax*/
document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}
setTimeout(FullscreenEle, 8000);
function EnableFullScreen() {
var elem = document.getElementById("image");
if (elem.requestFullscreen) /*Standard Syntax*/
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
elem.webkitRequestFullscreen();
else
console.log('You cannot go fullscreen currently')
}
</script>
</head>
<body>
<h1>Learn Blockchain</h1>
<img id="image" src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
<br>
<button onclick="EnableFullScreen()">Go fullscreen</button>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào "Chuyển sang chế độ toàn màn hình" -
Trong ví dụ trên -
Trước tiên, chúng tôi đã tạo một phần tử có id “image” và một liên kết hình ảnh dưới dạng giá trị thuộc tính src -
<img id="image" data-fr-src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
Sau đó, chúng tôi đã tạo nút “Chuyển sang chế độ toàn màn hình” sẽ thực thi phương thức EnableFullScreen () khi người dùng nhấp vào -
<button onclick="EnableFullScreen()">Go fullscreen</button>
Phương thức EnableFullScreen () lấy phần tử img bằng phương thức getElementById () của đối tượng tài liệu và gán nó cho biến elem. Sử dụng thuộc tính requestFullScreen, chúng tôi kiểm tra xem phần tử có thể được mở ở chế độ toàn màn hình hay không sử dụng thuộc tính requestFullScreen trên phần tử img.
Nếu phần tử đó có thể được mở ở chế độ toàn màn hình thì chúng ta sử dụng phương thức requestFullScreen () để lấy phần tử đó ở chế độ toàn màn hình. Nếu phần tử không thể được hiển thị ở chế độ toàn màn hình, chúng tôi sẽ hiển thị một số thông báo trong bảng điều khiển bằng cách sử dụng phương thức console.log ().
function EnableFullScreen() {
var elem = document.getElementById("image");
if (elem.requestFullscreen) /*Standard Syntax*/
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
elem.webkitRequestFullscreen();
else
console.log('You cannot go fullscreen currently')
} Vì chúng tôi không thể nhấp vào bất kỳ thứ gì sau khi phần tử chuyển sang chế độ toàn màn hình, chúng tôi sử dụng phương thức setTimeout (fullscreenEle, 8000) để chỉ định rằng nó sẽ thực thi phương thức fullscreenEle () sau 8000ms (8 giây) -
setTimeout(FullscreenEle, 8000);
Hàm FullscreenEle () trả về phần tử hiện đang ở chế độ toàn màn hình và sử dụng phương thức console.log (), chúng tôi hiển thị phần tử trong tab console -
function FullscreenEle() {
console.log(document.fullscreenElement|| /*Standard Syntax*/
document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
} Lưu ý - Bạn phải sử dụng các tiền tố cụ thể cho ví dụ này để hoạt động cho trình duyệt dự định của bạn. Trong ví dụ trên, chúng tôi chỉ viết cú pháp chuẩn và tiền tố trình duyệt cho trình duyệt Chrome, Opera và Safari. Dưới đây là một số tiền tố cho trình duyệt của bạn.
- Đối với requestFullscreen
- Firefox:mozRequestFullScreen
- IE / Edge:msRequestFullscreen
- Đối với toàn màn hìnhElement
- Firefox:mozFullScreenElement
- IE / Edge:msRequestFullscreen