Javascript 在calc（）函数中使用变量

我觉得我什么都试过了，但我就是不能让它起作用。我有一个名为“t”的变量，它存储$mobile\u menu\u height的值。该值当前设置为280px

var t = "<?php $mobile_menu_height ?>";  //this is currently 280px

而是使用变量（我尝试过使用't'和'mobile\u menu\u height'，但在我的calc（）函数中无法使用这两个变量。理想情况下，它应该是这样的：

y.style.height = "calc(100vh - 8px - t)";

或

但我只是停留在如何让这个工作。可能是因为WordPress对$mobile_menu_height的输入进行了消毒（或缺乏消毒）的问题吗？我已经尝试过输入和不输入“px”测量值，即“280”和“280px”

我在这里编写的完整脚本：

    <script>
        function toggleMobileNav() {
            var x = document.getElementById("container-mobile-menu");
            var y = document.getElementById("content-container");
            var t = "<?php $mobile_menu_height ?>";

            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.top = t;
                y.style.height = "calc(100vh - 288px)";
            } else {
                x.style.display = "none";
                y.style.top = "62px";
                y.style.height = "calc(100vh - 68px)";
            }
        }
    </script>

函数toggleMobileNav（）{
var x=document.getElementById（“容器移动菜单”）；
var y=document.getElementById（“内容容器”）；
var t=“”；
如果（x.style.display==“无”）{
x、 style.display=“block”；
y、 style.top=t；
y、 style.height=“计算（100vh-288px）”；
}否则{
x、 style.display=“无”；
y、 style.top=“62px”；
y、 style.height=“计算（100vh-68px）”；
}
}

您可以使用

window.innerHeight

获得100vh等效值，然后像这样手动计算

const windowH = window.innerHeight + 8 + parseInt(t);
y.style.height = windowH + "px";

---

谢谢大家！它使用了你们的答案组合来修复问题。我确实错过了一个回声，而window.innerHeight工作得很神奇。我现在就清理这些变量名。修复了那些想知道的代码

    <?php
        $mobile_menu_height = get_theme_mod( 'mobile_menu_height_setting', '' );
    ?>
    <script>
        function toggleMobileNav() {
            var x = document.getElementById("container-mobile-menu");
            var y = document.getElementById("content-container");
            var mobile_menu_content_drop = "<?php echo $mobile_menu_height; ?>";
            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.top = mobile_menu_content_drop;
                const windowH = window.innerHeight - 8 - parseInt(mobile_menu_content_drop);
                y.style.height = windowH + "px";
            } else {
                x.style.display = "none";
                y.style.top = "62px";
                y.style.height = "calc(100vh - 68px)";
            }
        }
    </script>

函数toggleMobileNav（）{
var x=document.getElementById（“容器移动菜单”）；
var y=document.getElementById（“内容容器”）；
var mobile_menu_content_drop=“”；
如果（x.style.display==“无”）{
x、 style.display=“block”；
y、 style.top=移动菜单内容下拉菜单；
const windowH=window.innerHeight-8-parseInt（移动菜单内容下拉菜单）；
y、 style.height=windowH+“px”；
}否则{
x、 style.display=“无”；
y、 style.top=“62px”；
y、 style.height=“计算（100vh-68px）”；
}
}
你不能仅仅连接字符串吗？你也应该强烈地考虑有意义的变量名。单字母的变量很难理解你需要回响的值：<代码> <代码>，或者它会简单地导致JS代码中的空字符串。
const windowH = window.innerHeight + 8 + parseInt(t);
y.style.height = windowH + "px";

    <?php
        $mobile_menu_height = get_theme_mod( 'mobile_menu_height_setting', '' );
    ?>
    <script>
        function toggleMobileNav() {
            var x = document.getElementById("container-mobile-menu");
            var y = document.getElementById("content-container");
            var mobile_menu_content_drop = "<?php echo $mobile_menu_height; ?>";
            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.top = mobile_menu_content_drop;
                const windowH = window.innerHeight - 8 - parseInt(mobile_menu_content_drop);
                y.style.height = windowH + "px";
            } else {
                x.style.display = "none";
                y.style.top = "62px";
                y.style.height = "calc(100vh - 68px)";
            }
        }
    </script>