Question

因此，我想使用js（因为它具有响应性并使用calc（））来获取.SideArrow的边距顶部，并在菜单中向其添加一个小像素值，但前提是.SideArrow具有“ display：inline-block” 。通常为“显示：内联”，但随媒体查询而变化。

我认为我的“如果显示：内联”部分已经向下（尚未将其应用于函数）。问题在于获得页边空白

我尝试了您在代码中看到的内容，并简单地添加了

var margin = document.getElementsByClassName("SideArrow").style.marginTop;

我遇到的问题是它总是以以下方式响应：未捕获到的TypeError：无法在“ Window”上执行“ getComputedStyle”：参数1的类型不是“ Element”。在（index）：80

指数：80 var style = window.getComputedStyle（arrows）;

代码：

var objName = "SideArrow";

//Function to toggle menu
var nav = document.getElementById("MobileNav");
var menubtn = document.getElementById("MobileMenu");

*

var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);

console.log(margin); //Both output []
console.log(arrows);

*

alert(margin); //Doesn't alert anything

var mvalue = arrows.rules.marginTop;
var tvalue = 197;
var zvalue = mvalue + tvalue;

console.log(mvalue);

*

function MenuToggle() {
  if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "197px") {
    nav.style.height = "0px"; 
    menubtn.innerHTML = "menu"; //Using Material icons for now
    arrows.style.marginTop = "mvalue" + "px";

  }
  else if (arrows.some(x => x.style.display == objProperty) && nav.style.height === "0px") {
    nav.style.height = "197px";
    menubtn.innerHTML = "clear";
    arrows.style.marginTop = "zvalue" + "px";
  }
  else if (arrows.some(x => x.style.display != objProperty) && nav.style.height === "197px") {
    nav.style.height = "0px";
    menubtn.innerHTML = "clear";
    arrows.style.marginTop = "mvalue" + "px";
  }
  else {
    nav.style.height = "197px";
    menubtn.innerHTML = "clear";
    arrows.style.marginTop = "mvalue" + "px";
  }

*

如代码中所示，当函数运行时（仅当显示为行内块时），我希望在脚趾上边添加197个像素，高度为“ nav”，但我什至无法获取当前页边距正确。

更新：更新了函数本身，也就是*中的内容。 @JackBashord给我看的margin和arrow vars

查看整个文件可能要容易得多！这是仓库，我在Mobile-menu分支下工作 https://github.com/SanderGodard/Home

编辑：我设法解决了这个问题，并且发现了其他问题，因此对其他遇到相同问题的人表示抱歉。我给每个箭头指定了自己的ID，并用margin-top弄乱了position: absolute。祝你好运

Answer 1

问题在于，当您调用getElementsByClassName时，会得到一个NodeList，它是一种数组类型，而不是单个元素。您可以改用querySelector来解决此问题：

var arrows = document.querySelector("." + objName);

您无需使用margin-top就可以获取getComputedStyle值-只需执行以下操作：

var margin = arrows.style.marginTop;

然后像这样执行您的功能：

if (arrows.style.display == "inline") {
    MenuToggle();
}

注意：以上内容仅在只有一个.SideArrow元素的情况下起作用。这是您要针对多个元素执行的操作：

var arrows = Array.prototype.slice.call(document.querySelectorAll("." + objName));
var margin = arrows.map(x => x.style.marginTop);
if (arrows.some(x => x.style.display == "inline") {
    MenuToggle();
}

注意：上面的代码将组成margin和arrows数组。

我正在尝试使此元素达到最高水平并简单地对其进行更改

1 个答案: