Four ways to write full screen in JS

<div class="container"
   <button >full screen</button>
   <button >quit</button>
</div>

/* Basic element styles */
  html {
    color: #000;
    background: paleturquoise;
    min-height: 100%;
   }
  /* Structure */
  .container {
   text-align: center;
   width: 500px;
   min-height: 600px;
   background: #fff;
   border: 1px solid #ccc;
   border-top: none;
   margin: 20px auto;
   padding: 20px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 1px 1px 10px #000;
   -moz-box-shadow: 1px 1px 10px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
  }
  button{
   margin: 200px auto;
   width: 100px;
   height: 30px;
   background-color: aliceblue;
  }

  /* Fullscreen */
  html:-moz-full-screen {
   background: blue;
  }

  html:-webkit-full-screen {
   background: blue;
  }

  html:-ms-fullscreen {
   background: blue;
   width: 100%; /* needed to center contents in IE */
  }

  html:fullscreen {
   background: blue;
  }

(function () {
  var viewFullScreen = ("full-screen");
  if (viewFullScreen) {
   ("click", function () {
    var docElm = ;
    if () {
     ();
    }
    else if () {
     ();
    }
    else if () {
     ();
    }
    else if () {
     ();
    }
   }, false);
  }

  var cancelFullScreen = ("exit-fullscreen");
  if (cancelFullScreen) {
   ("click", function () {
    if () {
     ();
    }
    else if () {
     ();
    }
    else if () {
     ();
    }
    else if () {
     ();
    }
   }, false);
  }


  var fullscreenState = ("fullscreen-state");
  if (fullscreenState) {
   ("fullscreenchange", function () {
     = ()? "" : "not ";
   }, false);

   ("msfullscreenchange", function () {
     = ()? "" : "not ";
   }, false);

   ("mozfullscreenchange", function () {
     = ()? "" : "not ";
   }, false);

   ("webkitfullscreenchange", function () {
     = ()? "" : "not ";
   }, false);
  }

 })();

<div style="margin:0 auto;height:600px;width:700px;">
 <button >full screen</button>
 <div  style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
  <h1>full screen展示和退出full screen</h1>
 </div>
</div>

("btn").onclick=function(){
  var elem = ("content");
  requestFullScreen(elem);
  /*
    Note that the style settings here represent the style after full screen display.
    After exiting full screen, the style is still there.
    To return to the original style, you need to restore the style back in the exit full screen
    (See Writing Method Three)
    */
   = '800px';
   = '1000px';
 };
 function requestFullScreen(element) {
  var requestMethod =  ||  ||  || ;
  if (requestMethod) {
   (element);
  } else if (typeof  !== "undefined") {
   var wscript = new ActiveXObject("");
   if (wscript !== null) {
    ("{F11}");
   }
  }
 }

<div style="margin:0 auto;height:600px;width:700px;">
 <div  style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
  <button >full screen</button>
  <h1>full screen展示和quitfull screen</h1>
  <button  >quit</button>
 </div>
</div>

("btn").onclick=function(){
  var elem = ("content");
  requestFullScreen(elem);
  /*
    Note that the style settings here represent the style after full screen display.
    After exiting full screen, the style is still there.
    To return to the original style, you need to restore the style back in the exit full screen
    */
   = '800px';
   = '1000px';
 };
("btnn").onclick=function () {
  exitFullscreen();
 };
 /*
   Full screen display
   */
function requestFullScreen(element) {
 var requestMethod =  ||  ||  || ;
 (element);
 };
 /*
   Exit in full screen
   */
function exitFullscreen() {
  var elem = document;
  var elemd = ("content");
  if () {
   ();
  } else if () {
   ();
  } else if () {
   ();
  } else if () {
   ();
  } else {
   //The browser does not support full screen API or has been disabled  };

  /*
    Style restore after exiting full screen
    */
   = '500px';
   = '700px'

 }

<div  STYLE="width: 500px;height: 300px;background-color: aliceblue;margin: auto">
 <button >full screen&quit</button>
</div>

 .full{
   position: fixed;
   align-content: center;
   /*top: 10px;*/
   /*left: 10px;*/
   /*
     100% of the original foundation
    */
   width: 100%;
   height: 100%;
   overflow: auto;
  }

(function ($) {

 // Adding a new test to the jQuery support object
 $. = supportFullScreen();

 // Creating the plugin
 $. = function (props) {

  if (!$. ||  != 1) {

   // The plugin can be called only
   // on one element at a time

   return this;
  }

  if (fullScreenStatus()) {
   // if we are already in fullscreen, exit
   cancelFullScreen();
   return this;
  }

  // You can potentially pas two arguments a color
  // for the background and a callback function

  var options = $.extend({
   'background': '#111',
   'callback': function () {}
  }, props);

  // This temporary div is the element that is
  // actually going to be enlarged in full screen

  var fs = $('<div>', {
   'css': {
    'overflow-y': 'auto',
    'background': ,
    'width': '100%',
    'height': '100%',
    'align': 'center'
   }
  });

  var elem = this;

  // You can use the .fullScreen class to
  // apply styling to your element
  ('fullScreen');

  // Inserting our element in the temporary
  // div, after which we zoom it in fullscreen
  (elem);
  (elem);
  requestFullScreen((0));

  (function (e) {
   if ( == this) {
    // If the black bar was clicked
    cancelFullScreen();
   }
  });

   = function () {
   cancelFullScreen();
   return elem;
  };

  onFullScreenEvent(function (fullScreen) {

   if (!fullScreen) {

    // We have exited full screen.
    // Remove the class and destroy
    // the temporary div

    ('fullScreen').insertBefore(fs);
    ();
   }

   // Calling the user supplied callback
   (fullScreen);
  });

  return elem;
 };


 // These helper functions available only to our plugin scope.


 function supportFullScreen() {
  var doc = ;

  return ('requestFullscreen' in doc) ||
   ('mozRequestFullScreen' in doc && ) ||
   ('webkitRequestFullScreen' in doc);
 }

 function requestFullScreen(elem) {
  if () {
   ();
  } else if () {
   ();
  } else if () {
   ();
  }
 }

 function fullScreenStatus() {
  return  ||
    ||
   ;
 }

 function cancelFullScreen() {
  if () {
   ();
  } else if () {
   ();
  } else if () {
   ();
  }
 }

 function onFullScreenEvent(callback) {
  $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function () {
   // The full screen status is automatically
   // passed to our callback as an argument.
   callback(fullScreenStatus());
  });
 }

})(jQuery);

 $(function () {
  $("#btn").click(function () {
   $("#cont").fullScreen();
  })
 });