Блог

У меня есть некоторый код, в котором при нажатии кнопки переключается активный класс. В то же время мне нужно установить a top-margin для переключаемого элемента, который также необходимо удалить после повторного нажатия кнопки и удаления переключаемого класса. Я не могу установить top-margin как часть активного класса, так как мне нужно динамически получать значение поля, проверяя высоту другого элемента.

Это код, который я должен переключить класс и добавить поле

 var sizeBtn = document.querySelector(".size-toggle-btn");
var sizeItems = document.querySelector(".select-items");
var elementHeight = document.querySelector(".Detail-Container__inline").offsetHeight ;

sizeBtn.addEventListener("click", function(e) {
    sizeItems.classList.toggle('size-toggle--active')
    sizeItems.style.marginTop = "-"   elementHeight   "px";
});
 

Однако, очевидно, что это не удаляет стиль при повторном нажатии кнопки, поэтому в основном мне нужно переключать стиль так же, как активный класс. Есть ли способ сделать это?

Вам нужно проверить, есть ли className или нет, чтобы код мог быть:

 var sizeBtn = document.querySelector(".size-toggle-btn");
var sizeItems = document.querySelector(".select-items");
var elementHeight = document.querySelector(".Detail-Container__inline").offsetHeight ;

sizeBtn.addEventListener("click", function(e) {
  if(sizeItems.classList.contains('size-toggle--active')) {
    sizeItems.classList.remove('size-toggle--active')
    sizeItems.style.marginTop = null;
  }
  else{
    sizeItems.classList.add('size-toggle--active')
    sizeItems.style.marginTop = "-"   elementHeight   "px";
  }
});