全屏吧!
代碼如下:
<div class="dada">全屏吧!</div>
<style>
.dada {
height: 480px;
line-height: 480px;
width: 480px;
max-width: 100%;
background-color: #f36;
text-align: center;
font-size: 36px;
}
</style>
<script>
window.addEventListener("click", dadaclick);
function dadaclick(e) {
if (e.target.classList.contains('dada')) {
const fullarea = document.querySelector('.dada');
if (this.fullscreen) { // 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else { // 进入全屏
if (fullarea.requestFullscreen) {
fullarea.requestFullscreen()
} else if (fullarea.webkitRequestFullScreen) {
fullarea.webkitRequestFullScreen()
} else if (fullarea.mozRequestFullScreen) {
fullarea.mozRequestFullScreen()
} else if (fullarea.msRequestFullscreen) {
// IE11
fullarea.msRequestFullscreen()
}
}
this.fullscreen = !this.fullscreen
}
}
</script>
(驕傲的使用Snippets來展示和運行我的代碼)