Javascript：函數內部的全局變量

Question

我是一個嘗試創建響應式 HTML-Sidenav 的初學者。 我想更改函數內全局變量的值。 之后，我想再次使用該變量，就像縱向或橫向比例的條件一樣，以使 Sidenav 像我想要的那樣工作。 感謝你的付出。 如果旋轉設備后出現條件，是否可以為 Portait 或 Landscape 使用“更新”變量？ 或者還有其他解決方案嗎？

    /* window-orientation to var and getting updated by orientation change */
    window.ori = Math.abs(window.orientation); /* write changedorientation*/

    /* Portrait scale */
    if (ori === 0 || ori === 180) {
        /* Portrait-Sidenav */
        function openNav() {
            document.getElementById("Main").style.marginLeft = "100%";
            document.getElementById("mySidenav").style.width = "calc(100% - 30px)";
            document.getElementById("mySidenav").style.display = "block";
            document.getElementById("openNav").style.display = 'none';
            document.getElementById("Main").style.top = "0px"; /* excl. Top-Nav space */
        }

        function closeNav() {
            document.getElementById("Main").style.marginLeft = "0%";
            document.getElementById("mySidenav").style.width = "0%";
            document.getElementById("mySidenav").style.display = 'none'
            document.getElementById("openNav").style.display = "inline-block";
            document.getElementById("Main").style.top = "35px"; /* incl. Top-Nav space */
        }
    }

    /* Landscape scale */
    if (ori === 90 || ori === -90) {
        /* Landscape-Sidenav */
        function openNav() {
            document.getElementById("Main").style.marginLeft = "35%";
            document.getElementById("mySidenav").style.width = "calc(35% - 20px)";
            document.getElementById("mySidenav").style.display = "block";
            document.getElementById("openNav").className = 'topnav-hide';
            document.getElementById("Main").style.top = "0px"; /* excl. Top-Nav space */
        }

        function closeNav() {
            document.getElementById("Main").style.marginLeft = "0px";
            document.getElementById("mySidenav").style.width = "0px";
            document.getElementById("mySidenav").style.display = "none";
            document.getElementById("openNav").className = 'topnav';
            document.getElementById("Main").style.top = "35px"; /* incl. Top-Nav space */
        }
    }

    /* onorientationchanges for responsiv Sidenav */
    window.onorientationchange = function () { 
        /* write current orientation in var */
        window.ori = Math.abs(window.orientation); /* just working in this funktion */
        /* Sidenav to var */
        var x = document.getElementById("mySidenav");

        if ((ori === 90 || ori === -90) && x.offsetWidth > 0 && x.offsetHeight > 0) {
        /* you are now in Landscape */
        document.getElementById("Main").style.marginLeft = "35%";
        document.getElementById("mySidenav").style.width = "calc(35% - 20px)";
        document.getElementById("Main").style.top = "0px"; /* excl. Top-Nav space */
        }

        if ((ori === 0 || ori === 180) && x.offsetWidth > 0 && x.offsetHeight > 0) {
        /* you are now in Portrait */
        document.getElementById("Main").style.marginLeft = "100%";
        document.getElementById("mySidenav").style.width = "calc(100% - 30px)";
        document.getElementById("Main").style.top = "35px"; /* incl. Top-Nav space */
        }
    };

Answer 1

或者還有其他解決方案嗎？

YES 使用媒體查詢和 CSS 網格。