html5 js 实现浏览器全屏效果（F11）

<input id="Button1" type="button" value="开始全屏" onclick="kaishi()" />
<input id="Button2" type="button" value="关闭全屏" onclick="guanbi()" />

<script>
function kaishi()
{


var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}

function guanbi() {


if ( document.exitFullscreen) {
document.exitFullscreen();
}
else if ( document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if ( document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if ( document.msExitFullscreen) {
document.msExitFullscreen();
}
}




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);

跨浏览器全屏模式下样式代码

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }