مثال روش HTML DOM exitFullscreen() - ویرایشگر آنلاین نمونه (oldtoolbag.com)

<!DOCTYPE html>
<html>
<title>مثال طريقة HTML DOM exitFullscreen() - درس أساسي - oldtoolbag.com</title>
<head>
<style>
div:-moz-full-screen {
   background-color: pink;
}
div:-webkit-full-screen {
   background-color: pink;
}
div:fullscreen {
   background-color: pink;
}
#fullscreen:-moz-full-screen > p {
   color: red;
   font-size: 5em;
}
#fullscreen:-webkit-full-screen > p {
   color: red;
   font-size: 5em;
}
#fullscreen:fullscreen > p {
   color: red;
   font-size: 5em;
}
</style>
</head>
<body>
<h1>مصطلح الكسوة :fullscreen في CSS</h1>
<div id="fullscreen">
  <h1>:fullscreen عرض</h1>
  <p>عندما تكون المتصفحة في نمط الشاشة الكاملة، سيكبر النص ويصبح أحمر.</p>
  <button onclick="openFullscreen();">فتح الشاشة الكاملة</button>
  <button onclick="closeFullscreen();">إغلاق الشاشة الكاملة</button>
</div>
<script>
var elem = document.getElementById("fullscreen");
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) {  /* Firefox */
     document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
     document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {     /* IE/Edge */
     document.msExitFullscreen();
  }
}
</script>
</body>
</html>