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

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

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

Javascript：函数内部的全局变量

1 个答案: