HTML5 JS to achieve full screen browser

The project needs to be the Background browser window full screen, that is, we click a button to achieve the effect of pressing F11 full-screen. In HTML5, the global Wide Web has developed a full screen of the API, you can achieve full-screen effect, you can also make the page in the picture, video and so on full screen currently only Google Chrome +, SAFRI5.1+,FIRFOX10+,IE11 support

Fullscreen

var Docelm = document.documentelement;
The 
if (docelm.requestfullscreen) { 
docelm.requestfullscreen (); 
}
FireFox 
Else if (docelm.mozrequestfullscreen) { 
docelm.mozrequestfullscreen (); 
}
Chrome et 
else if (docelm.webkitrequestfullscreen) { 
docelm.webkitrequestfullscreen (); 
}
IE11
Else if (elem.msrequestfullscreen) {
elem.msrequestfullscreen ();
}

Exit Full Screen

if (document.exitfullscreen) { 
document.exitfullscreen (); 
} 
else if (document.mozcancelfullscreen) { 
document.mozcancelfullscreen (); 
} 
else if (document.webkitcancelfullscreen) { 
document.webkitcancelfullscreen (); 
}
else if (document.msexitfullscreen) {
document.msexitfullscreen ();
}

Event Monitoring

Document.addeventlistener ("Fullscreenchange", function () { 
fullscreenstate.innerhtml = (document.fullscreen)? "": "Not";}, False); 
Document.addeventlistener ("Mozfullscreenchange", function () { 
fullscreenstate.innerhtml = ( Document.mozfullscreen)? "": "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

In the browser full screen use We can also make style settings

Html:-moz-full-screen { 
background:red; 
} 
Html:-webkit-full-screen { 
background:red; 
} 
Html:fullscreen { 
background:red; 
}