Я пытаюсь получить эти элементы margin-top и просто изменить - PullRequest
Новая
       40

Я пытаюсь получить эти элементы margin-top и просто изменить

0 голосов
/ 29 декабря 2018

Итак, я хочу получить верхнюю границу .SideArrow, используя js (поскольку она отзывчива и использует calc ()), и добавить к ней небольшое значение в пикселях с помощью меню, но только если .SideArrow имеет «display: inline-block»,Обычно это «display: inline», но меняется в зависимости от медиа-запроса.

Я думаю, что у меня есть часть «If is display: inline» вниз (я еще не применил ее к функции).Проблема в том, чтобы получить наценку

Я попробовал то, что вы видите в коде, и просто добавил 

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

Проблема, которую я получаю, это то, что она всегда отвечает:Uncaught TypeError: Не удалось выполнить 'getComputedStyle' в 'Window': параметр 1 не относится к типу 'Element'.в (индекс): 80

индекс: 80 является var style = window.getComputedStyle (стрелки);

код: 

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";
  }

*

Как показано в коде, я хочу, чтобы toe margin-top добавил к нему 197 пикселей с высотой'nav', когда функция запущена (только когда display - inline-block), но я даже не могу правильно извлечь текущую верхнюю границу.

Обновление: обновлена ​​сама функция, то есть, что внутри*.А также поля маржи и стрелки, как показывал мне @JackBashord

Вероятно, гораздо проще увидеть весь файл!Вот репозиторий, я работаю в ветке Мобильное меню https://github.com/SanderGodard/Home

РЕДАКТИРОВАТЬ: мне удалось обойти это, и выяснил некоторые другие вещи, так что извините других людей с такой же проблемой,Я дал каждой стрелке свой идентификатор и перепутал с margin-top с position: absolute.Удачи

1 Ответ

0 голосов
/ 29 декабря 2018

Проблема в том, что когда вы вызываете 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.

...