html全屏/退出全屏按钮，以及监听Esc退出后按钮样式变更

全屏和退出全屏引用了layui里面的icon标签，也可以使用自己的图片，都可以。

html:

<div id="screenDiv">
	<!-- 以下是layui里图标的写法，可以换成自己的图片 -->
    <i class="layui-icon layui-icon-screen-full" id="fullScreenIcon"></i>
    <i class="layui-icon layui-icon-screen-restore" id="restoreScreenIcon"></i>
</div>

css:

#fullScreenIcon,#restoreScreenIcon{
    position: relative;
    width: 100%;
    height: 100%;
    color: #00e7ff;
    font-size: 2vw;
    cursor: pointer;
}
#restoreScreenIcon{
    display: none;
}

样式预览：

js:

/**
     * 全屏点击事件
     */
    $("#fullScreenIcon").click(function () {
        let de = document.documentElement;

        if (de.requestFullscreen) {
            de.requestFullscreen().then();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        } else if (de.msRequestFullscreen) {
            de.msRequestFullscreen();
        }else {
            console.log("当前浏览器不支持全屏！");
            return false;
        }
        $(this).fadeOut(0);
        $(this).next().fadeIn(0);
    });
    
    /**
    *退出全屏点击事件
    */
    $("#restoreScreenIcon").click(function () {
        if(document.exitFullscreen) {
            document.exitFullscreen().then();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        $(this).fadeOut(0);
        $(this).prev().fadeIn(0);
    });

	/**
	* 监听全屏/退出全屏效果事件
	*/	
    document.addEventListener("fullscreenchange", function( event ) {
        if (document.fullscreenElement) {
            if ($("#fullScreenIcon").next().css("display") == "none"){
                $("#fullScreenIcon").fadeOut(0);
                $("#fullScreenIcon").next().fadeIn(0);
            }
        } else {
            if ($("#fullScreenIcon").css("display") == "none"){
                $("#fullScreenIcon").fadeIn(0);
                $("#fullScreenIcon").next().fadeOut(0);
            }
    }});

加上全屏变更监听事件，就可以监听到Esc退出全屏事件，可以变更全屏按钮的样式。