Javascript DOM HTML Document fullscreenElement Property

Introduction

Get the element that is currently in full screen mode:

var elem = document.fullscreenElement;

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Test</button>

<p id="demo"></p>

<script>
function myFunction() {//from w w  w.  jav a 2 s.co  m
  var x = document.fullscreenElement;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The fullscreenElement property returns the current element that is displayed in full screen mode, or null when not in full screen.

This property requires specific prefixes to work in different browsers.

Use the element.requestFullscreen() method to view an element in full screen mode.

Use the element.exitFullscreen() method to cancel full screen mode.

Using prefixes for cross-browser code:

if ( ? document.fullscreenElement || /* Standard syntax */ ? 
       document.webkitFullscreenElement || /* Chrome, Safari and Opera syntax */ ? 
       document.mozFullScreenElement ||/* Firefox syntax */ ? 
       document.msFullscreenElement /* IE/Edge syntax */ ) { 

        //your code here

}

Previous Next

Javascript DOM HTML Document fullscreenElement Property

Introduction

Related