javascript - 在 calc() 函数中使用变量

Question

我觉得我已经尝试了所有方法，但我似乎无法让它正常工作。我有一个名为“t”的变量，它存储 $mobile_menu_height 的值。该值目前设置为 280px；

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

在脚本的更下方，我想去掉这一行中的硬编码“288px”(我将保留 8px 硬编码)

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

而是使用变量(我试过使用 't' 和 '$mobile_menu_height' 但我无法在我的 calc() 函数中工作。理想情况下它看起来像这样:

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

或

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

但我只是停留在如何让它工作上。这可能是 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>

Answer 1

您可以使用 window.innerHeight 获得 100vh 等效值并像这样手动计算

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