requestFullScreen();//开启全屏显示
cancelFullScreen();//退出全屏显示
fullScreenElement();//是否全屏状态
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<style>
div{
height: 200px;
width: 200px;
background-color: aqua;
}
</style>
<body>
<div id="content">
<button id="fullScreen">全屏</button>
<button id="cancelFullScreen">退出全屏</button>
<button id="isFullScreen">是否全屏</button>
</div>
</body>
<script type="text/javascript">
var div=document.querySelector("div");
window.οnlοad=function(){
document.querySelector("#fullScreen").οnclick=function(){
if(div.requestFullScreen)
div.requestFullScreen();
else if(div.webkitRequestFullScreen)
div.webkitRequestFullScreen();
else if(div.mozRequestFullScreen)
div.mozRequestFullScreen();
else if(div.msRequestFullscreen)
div.msRequestFullscreen();
}
document.querySelector("#cancelFullScreen").οnclick=function(){
if(document.cancelFullScreen)
document.cancelFullScreen();
else if(document.webkitCancelFullScreen)
document.webkitCancelFullScreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.msCancelFullScreen)
document.msCancelFullScreen();
}
document.querySelector("#isFullScreen").οnclick=function(){
if(document.fullscreenElement||document.webkitFullscreenElement||
document.mozFullScreenElement||document.msFullscreenElement){
alert("true");
}
else{
alert("false");
}
}
}
</script>
</html>