js实现全屏，退出全屏功能

一、HTML部分

<div id="wp" class="warpper">
	<button id="screenBtn" class="btn" onclick="handleFullScreen()">全屏</button>
</div>}

二、CSS部分

.warpper{
width: 43px;
height: 24px;
background: rgb(40, 44, 52);
}

三、JS实现

	let fullscreen = false
	// 全屏事件
	function handleFullScreen() {
		let element = document.documentElement
		const wp = document.getElementById('wp')
		const screenDom = document.getElementById('screenBtn')
		if (fullscreen) { // 退出全屏
			if (document.exitFullscreen) { // W3C标准
				document.exitFullscreen()
			} else if (document.webkitCancelFullScreen) { // Chrome
				document.webkitCancelFullScreen()
			} else if (document.mozCancelFullScreen) { // firefox
				document.mozCancelFullScreen()
			} else if (document.msExitFullscreen) { // IE 
				document.msExitFullscreen()
			} else {
				alert('当前浏览器不支持全屏显示！')
			}
			wp.style.width = '43px'
			wp.style.height = '24px'
			screenDom.innerHTML = '全屏'
		} else { // 全屏 
			if (element.requestFullscreen) {
				element.requestFullscreen()
			} else if (element.webkitRequestFullScreen) {
				element.webkitRequestFullScreen()
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen()
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen()
			} else {
				alert('当前浏览器不支持全屏显示！')
			}
			wp.style.width = '100vw'
			wp.style.height = '100vh'
			screenDom.innerHTML = '退出全屏'
		}
		fullscreen = !fullscreen
	}