Javascript：函数内部的全局变量答案

【问题标题】：Javascript: global variable inside of a functionJavascript：函数内部的全局变量
【发布时间】：2020-04-04 13:33:08
【问题描述】：

我是一个尝试创建响应式 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 */
        }
    };

【问题讨论】：

问题/疑问是？
请注意，由于提升，您在if 语句中的函数声明可能无法在所有浏览器上按预期工作。 Block scoped function declarations 是在 ES6 中引入的。在 ES5 中，你会得到 last 函数声明。在 ES6 中，它们不会是全局的。
另外，Math.abs 只会返回正值或零，所以ori === -90 是无用的检查。
在更改窗口方向后打开导航无法正常工作，因为我只是在函数内部更改了 ori 变量。但我想在函数外部使用这个更改的变量来正确打开或关闭导航。
如何更改全局变量值？

标签： javascript variables scope

【解决方案1】：

或者还有其他解决方案吗？

是的，使用 Media queries 和 CSS 网格。

【讨论】：