Javascript 创建动态全屏和最小化Div功能

屏幕显示3个动态创建和加载的div。我遇到的问题是，当我试图使div全屏显示时，如何调整大小。单击前面的按钮和后面的第二个按钮。使用顶部的“选择”选项时，调整大小的效果非常好，但全屏显示的效果并不相同

这是我的扑克牌：

这是我当前的调整大小功能：

for(i = 0; i<numOfDivs.length; i++){
    var flipTarget = document.getElementById(flipDiv[i]);
    addResizeListener(flipTarget, function() {
        for(j = 0; j<numOfDivs.length; j++){
            var style = window.getComputedStyle(flipTarget);
            divWidth = parseInt(style.getPropertyValue('width'), 10);
            divHeight = parseInt(style.getPropertyValue('height'), 10);

            width = divWidth - margin.left - margin.right;
            height = divHeight - margin.top - margin.bottom;

            document.getElementById(frontDivNames[j]).innerHTML = '<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onclick="flipper(\''+flipperDivNames[j]+'\')">&#xf013;</span>';

            makeTestGraph();
            makeSliderGraph();
        };
    });
}

任何帮助隐藏所有其他div并使其稍后重新出现也将不胜感激。这花了我几天的时间，尽管我已经重写了几次代码，但几乎一无所获

---

感谢您的帮助。

javascript全屏api有什么问题吗

<script>
var fullscreen;

SetFullscreen = function DetectFullscreen(el){


    DesktopFullScreen = function ToggleFullScreen(el){

        function cancelFullScreen(el) {
                if (window.document.exitFullscreen) {
                    window.document.exitFullscreen();
                } else if (window.document.webkitExitFullscreen) {
                    window.document.webkitExitFullscreen();
                } else if (window.document.mozCancelFullScreen) {
                    window.document.mozCancelFullScreen();
                } else if (window.document.msExitFullscreen) {
                    window.document.msExitFullscreen();
                }
                return undefined;
            }

        function requestFullScreen(el) {

                // Supports most browsers and their versions.
                var requestMethod = document.getElementById(el).requestFullScreen || document.getElementById(el).webkitRequestFullScreen || document.getElementById(el).mozRequestFullScreen || document.getElementById(el).msRequestFullscreen;

                if (requestMethod) { // Native full screen.
                    requestMethod.call(document.getElementById(el));
                } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript !== null) {
                        wscript.SendKeys("{F11}");
                    }
                }
                return true;
           }

        if (fullscreen){
            fullscreen = cancelFullScreen(el);
        }
        else{
            fullscreen = requestFullScreen(el);
        }
    }

    MobileFullScreen = function ToggleFullScreen(el){

        function cancelFullScreen(el) {
                document.getElementById("fullscreenstyle").innerHTML="";
                return undefined;
            }

        function requestFullScreen(el) {

                document.getElementById("fullscreenstyle").innerHTML="#"+el+" {position:fixed;top:0px;left:0px;width:100%;height:100%;}";
                return true;
           }

        if (fullscreen){
            fullscreen = cancelFullScreen(el);
        }
        else{
            fullscreen = requestFullScreen(el);
        }
    }

    if( navigator.userAgent.match(/mobile/i)){
        MobileFullScreen(el);
    }
    else{
        DesktopFullScreen(el);
    }
}
</script>
<style>
div{background:white;}
</style>
<style id="fullscreenstyle">

</style>

<div id="fullscreen" onclick="SetFullscreen(this.id)">hello</div>   

根据你的评论，你在找这样的东西吗

<script>


        function cancelFullScreen(el) {
                document.getElementById("fullscreenstyle").innerHTML="";
                selectedElement = document.getElementById(el);
                selectedElement.setAttribute("onclick","requestFullScreen(this.id)");
                 document.body.innerHTML=bodysave;
                return undefined;
            }

        function requestFullScreen(el) {

                document.getElementById("fullscreenstyle").innerHTML="#"+el+" {background:pink;position:fixed;top:0px;left:0px;width:97%;height:97%;}";
                selectedElement = document.getElementById(el);
                                bodysave = document.body.innerHTML;
                while (document.body.firstChild) {
                    document.body.removeChild(document.body.firstChild);
                }
                document.body.appendChild(selectedElement);
                selectedElement.setAttribute("onclick","cancelFullScreen(this.id)");

                return true;
        }



</script>
<style>
div{background:white;}
</style>
<style id="fullscreenstyle">

</style>

<div id="fullscreen" onclick="requestFullScreen(this.id)">hello</div>   
<div id="fullscreen2" onclick="requestFullScreen(this.id)">hello</div>   
<div id="fullscreen3" onclick="requestFullScreen(this.id)">hello</div>   

---

那么，第二个按钮的行为与选择按钮相同，选择按钮将全屏显示？另一个问题，当我们进入全屏模式时，所有其他的div都应该隐藏？是的@n0m4d你知道了，你可能误解了。我不希望窗口全屏显示，我希望div是窗口的大小mobilefulscreen函数可以做到这一点。不，让我更具体一些。我不想让窗口全屏显示。我只希望其他div消失，div选择为97%乘97%，看起来非常接近。我会测试一下，明天再给你回复。看起来正是我需要的。