
<div id="box">
网页全屏
<div id="btn-qp">
>点击<
</div>
</div>
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#box {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: aqua;
}
#btn-qp {
width: 60px;
height: 60px;
background-color: rgba(190, 190, 190, 0.589);
border-radius: 5px;
position:absolute;
right: 1%;
bottom:4%;
z-index: 2;
}
var btnqp = document.getElementById('btn-qp')
btnqp.onclick = function() {
const isFullScreen = document.fullscreenElement
var element = document.documentElement;
if(isFullScreen){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
console.log("已退出全屏!");
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
console.log("已进入全屏!");
}
}