- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM fullscreenElement property
The HTML DOM fullscreenElement property is used for returning the element that is currently displayed in full screen mode. It will return null if the given element in not in fullscreen.
Syntax
Following is the syntax for fullscreenElement property −
document.fullscreenElement
Let us look at an example of the fullscreenElement property −
Note − This example only has standard syntax and browser prefix for Chrome, Safari and Opera. For your browser prefix, check the last section.
Example
Let us see an example −
<!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>Output
This will produce the following output −
On clicking the “Go fullscreen” −
In the above example −
We have first created an element with id “image” and an image link as src attribute value −
<img id="image" data-fr-src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
We have then created a “Go fullscreen” button that will execute the EnableFullScreen() method when clicked by the user −
<button onclick="EnableFullScreen()">Go fullscreen</button>
The EnableFullScreen() method gets the img element using the document object getElementById() method and assigns it to variable elem. Using the requestFullScreen property, we check if the element can be opened in fullscreen mode or not using the requestFullScreen property on the img element.
If that element can be opened in fullscreen we then use the requestFullScreen() method to get that element in fullscreen mode. If the element cannot be displayed in the fullscreen mode, we display some message in the console using the console.log() method.
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')
}Since we can’t click on anything after the element goes fullscreen, we use the setTimeout(fullscreenEle,8000) method to specify that it should execute the fullscreenEle() method after 8000ms (8s) −
setTimeout(FullscreenEle, 8000);
The FullscreenEle() function returns the element that is currently in fullscreen mode and using the console.log() method we display the element in the console tab −
function FullscreenEle() {
console.log(document.fullscreenElement|| /*Standard Syntax*/
document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}Note − You have to use specific prefixes for this example to work for your intended browser. In the above example we have only written the standard syntax and browser prefix for Chrome, Opera and Safari browser. Below are some prefix for your browsers.
- For requestFullscreen
- Firefox: mozRequestFullScreen
- IE/Edge: msRequestFullscreen
- For fullscreenElement
- Firefox: mozFullScreenElement
- IE/Edge: msRequestFullscreen
103 Views
