HTML中局部DIV内容进行全屏显示，显示全屏与退出全屏

实例效果

// CSS 代码 ------------------------
.main {
	width: 100%;
	height: 400px;
}
.main .main-lt {
	width: 50%;
	height: 400px;
	float: left;
	background: #090;
}
.main .main-rt {
	width: 50%;
	height: 400px;
	float: right;
	background: #C00;
}
.main .main-rt .screenFull {
	width: 100%;
	height: 200px;
	background: #f00;
	font-size: 24px;
	line-height: 200px;
	text-align: center;
	color: #FFF;
}

// HTML 代码 ------------------------
<div class="main">
	<div class="main-lt"></div>
	<div class="main-rt">
		<div class="screenFull" id="screenFull" onclick="handleScreen()">
			显示全屏 / 退出全屏
		</div>
	</div>
</div>

// javascript 代码 ------------------------
// 全屏按钮
function handleScreen() {
    let element = document.getElementById('screenFull')
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else if (window.ActiveXObject) {
        const wscript = new ActiveXObject('WScript.Shell');
        if (wscript) {
            wscript.SendKeys('{F11}');
        }
    }

    // 退出全屏
    if (document.exitFullScreen) {
        document.exitFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

// 退出全屏操作
document.addEventListener('fullscreenchange', evt => {
    if (document.fullscreenElement) {
        console.info('全屏')
    } else {
        console.info('正常')
    }
})