如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.test {
width: 200px;
height: 200px;
background-color: #3a87e6;
}
</style>
<body>
<div id="test" class="test"></div>
<script>
var elem = document.getElementById("test")
var flag = false
elem.addEventListener('click', function () {
if (!flag) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
console.log(11)
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
console.log(22)
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
console.log(33)
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
console.log(44)
}
flag = !flag
}else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
flag = !flag
}
});
</script>
</body>
</html>