js某元素全屏

全屏吧!


代碼如下:

	<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來展示和運行我的代碼)

Leave a Comment