html5全屏api使用

//进入全屏
function requestFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}
//退出全屏
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
}
//添加全屏监听
document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreenElement)? "" : "not ";
}, false);
 
document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
}, false);
 
document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
 
document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
 
//全屏状态键盘输入 chrom浏览器
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
 
//全屏css样式
html:-moz-full-screen {  
    background: red;  
}  
 
html:-webkit-full-screen {  
    background: red;  
}  
 
html:fullscreen {  
    background: red;  
}