Click a button in html5 js to achieve full screen browser Effect

In the project, you need to screen the background browser window, that is, click a button to achieve full screen press F11. In HTML5, W3C has developed an API for full screen to achieve full screen effects. It can also enable full screen effects such as images and videos on pages. Currently, only google chrome 15 +, safri5.1 +, supported by firfox10 + and IE11

Full Screen
Copy codeThe Code is as follows:
Var docElm = document.doc umentElement;
// W3C
If (docElm. requestFullscreen ){
DocElm. requestFullscreen ();
}
// FireFox
Else if (docElm. Fetch requestfullscreen ){
DocElm. requestfullscreen ();
}
// Chrome, etc.
Else if (docElm. webkitRequestFullScreen ){
DocElm. webkitRequestFullScreen ();
}
// IE11
Else if (elem. msRequestFullscreen ){
Elem. msRequestFullscreen ();
}

Exit full screen
Copy codeThe Code is as follows:
If (document. exitFullscreen ){
Document. exitFullscreen ();
}
Else if (document. canccancelfullscreen ){
Document. Define cancelfullscreen ();
}
Else if (document. webkitCancelFullScreen ){
Document. webkitCancelFullScreen ();
}
Else if (document. msExitFullscreen ){
Document. msExitFullscreen ();
}

Event listening
Copy codeThe Code is as follows:
Document. addEventListener ("fullscreenchange", function (){
FullscreenState. innerHTML = (document. fullscreen )? "": "Not" ;}, false );

Document. addEventListener ("mozfullscreenchange", function (){
FullscreenState. innerHTML = (document. Specify fullscreen )? "": "Not" ;}, false );

Document. addEventListener ("webkitfullscreenchange", function (){
FullscreenState. innerHTML = (document. webkitIsFullScreen )? "": "Not" ;}, false );
Document. addEventListener ("msfullscreenchange", function (){
FullscreenState. innerHTML = (document. msFullscreenElement )? "": "Not" ;}, false );

Full Screen style settings

You can also set the style when using full screen in the browser.
Copy codeThe Code is as follows:
Html:-moz-full-screen {
Background: red;
}

Html:-webkit-full-screen {
Background: red;
}

Html: fullscreen {
Background: red;
}