Javascript DOM HTML Element exitFullscreen() Method with CSS style

Introduction

You can use CSS to style the page when it is in full screen mode.

Click on the "Open Full screen" button to open this page in full screen mode.

Close it by either clicking the "Esc" key on your keyboard, or with the "Close Full screen" button.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {//  w w  w  .j  a v  a 2s .co  m
  background-color: yellow;
}

/* Firefox syntax */
:-moz-full-screen {
  background-color: yellow;
}

/* IE/Edge syntax */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
  document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
  }
}
</script>

</body>
</html>



PreviousNext

Related