切换全屏并删除样式

Question

I am trying to toggle to fullscreen when I press a button. 按下按钮时，我试图切换到全屏显示。 I have created some extra styles when the window pops up but, when I try to exit using the escape key, the styles are still there. 当窗口弹出时，我创建了一些其他样式，但是当我尝试使用转义键退出时，样式仍然存在。 If I press the escape key after the fullscreen has exited the styles are removed. 如果在全屏退出后按退出键，则将删除样式。 Is there a workaround. 有没有解决方法。 Here is the code of what I have currently 这是我目前拥有的代码

var mainContainer = document.getElementById("mainContainer");

function toggleFullScreen() {
    if (mainContainer.webkitRequestFullscreen) {
        mainContainer.webkitRequestFullscreen();
        mainContainer.style.backgroundColor = "#3D5A80";
        mainContainer.style.paddingTop = "40px";
    }
    $(document).keydown(function (e) {
        if (e.keyCode == 27) {
            mainContainer.style.backgroundColor = null;
        }
    });
}

Answer 1

here is js fiddle for toy 这是玩具的小提琴

 var mainContainer = document.getElementById("mainContainer"); function toggleFullScreen() { if (mainContainer.webkitRequestFullscreen) { mainContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); mainContainer.style.backgroundColor = "#3D5A80"; mainContainer.style.paddingTop = "40px"; } document.addEventListener('webkitfullscreenchange', exitHandler); } function exitHandler() { if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) { mainContainer.style.backgroundColor = null; } } $(document).keydown(function (e) { if (e.keyCode == 27) { // this is nessecary so far i dont know how to attach event on esc while fullscreen on } }); $('.button').click(function(){ toggleFullScreen(); });

 #mainContainer{ height:50vw; width:100%; background:green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='mainContainer'> </div> <button class='button'> FS </button>

Oh i guess snipped does not support fullscreen play it on jsfiddle 哦，我猜它不支持在jsfiddle上全屏播放

so far i just attached event when you go off from fullscreen thats all enjoy 到目前为止，我只是附加了一个事件，当您从全屏模式退出时，所有人都喜欢

Answer 2

 <html> <div id="mainContainer" onclick="toggleFullScreen(this)" style="width:100%; height: 100%" /> <script> var mainContainer = document.getElementById("mainContainer"); function toggleFullScreen(divObj) { if (divObj.requestFullscreen) if (document.fullScreenElement) { document.cancelFullScreen(); } else { divObj.requestFullscreen(); } else if (divObj.msRequestFullscreen) if (document.msFullscreenElement) { document.msExitFullscreen(); } else { divObj.msRequestFullscreen(); } else if (divObj.mozRequestFullScreen) if (document.mozFullScreenElement) { document.mozCancelFullScreen(); } else { divObj.mozRequestFullScreen(); } else if (divObj.webkitRequestFullscreen) if (document.webkitFullscreenElement) { document.webkitCancelFullScreen(); } else { divObj.webkitRequestFullscreen(); } } function changeHandler(){ var fs = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; if (fs) { mainContainer.style.backgroundColor = "#3D5A80"; mainContainer.style.paddingTop = "40px"; } else { mainContainer.style.backgroundColor = ''; mainContainer.style.paddingTop = ''; } } document.addEventListener("fullscreenchange", changeHandler, false); document.addEventListener("webkitfullscreenchange", changeHandler, false); document.addEventListener("mozfullscreenchange", changeHandler, false); document.addEventListener("MSFullscreenChange", changeHandler, false); </script> </html>

切换全屏并删除样式

问题描述

2 个解决方案

解决方案1
0 2018-09-24 03:22:41

解决方案2
0 2018-09-24 03:48:19

切换全屏并删除样式

问题描述

2 个解决方案

解决方案1 0 2018-09-24 03:22:41

解决方案2 0 2018-09-24 03:48:19

解决方案1
0 2018-09-24 03:22:41

解决方案2
0 2018-09-24 03:48:19