Странно работает position absolute при добавлении через JS

Question

При добавлении position:absolute вручную к классу burger__line линии преобразуются в крестик.

При добавлении position:absolute через JS к классу burger__line линии не преобразуются в крестик.

document.querySelector('.burger__lines').addEventListener('click', () => {
  const line = document.querySelector('.burger__line');
  const line1 = document.querySelector('.burger__line1');
  const line2 = document.querySelector('.burger__line2');
  const line3 = document.querySelector('.burger__line3');

  line.style.position = 'absolute';
  line1.style.transform = 'rotate(45deg)';
  line2.style.opacity = 0;
  line3.style.transform = 'rotate(-45deg)';
});

body{
  background-color:#000;
}
.burger {
  position: fixed;
}
.burger__lines {
  cursor: pointer;
  margin: 5px;
}
.burger__line {
  width: 25px;
  height: 3px;
  margin-top: 5px;
  background-color: #fff;
}

 <div class="burger">
  <div class="burger__lines">
    <div class="burger__line burger__line1"></div>
    <div class="burger__line burger__line2"></div>
    <div class="burger__line burger__line3"></div>
  </div>
</div>

Answer 1

Все потому что в переменной line у вас находиться 1 элемент. Вы задаете свойство только ему одному.

Что б получилось как вам нужно, можете воспользоваться циклом что б перебрать все элементы с данным классом, или более легкий способ, это поставить событие нажатия на сам бургер:

body{
  background-color:#000;
}
.burger {
  position: fixed;
}
.burger__lines {
  cursor: pointer;
  margin: 5px;
}
.burger__line {
  width: 25px;
  height: 3px;
  margin-top: 5px;
  background-color: #fff;
    transition: 0.3s;
}
.burger-active .burger__line{
    position: absolute;
}
.burger-active .burger__line1{
    transform: rotate(45deg);
}
.burger-active .burger__line2{
    opacity: 0;
}
.burger-active .burger__line3{
    transform: rotate(-45deg);
}

 <div class="burger" onclick="this.classList.toggle('burger-active');">
  <div class="burger__lines">
    <div class="burger__line burger__line1"></div>
    <div class="burger__line burger__line2"></div>
    <div class="burger__line burger__line3"></div>
  </div>
</div>

БЛОГ НА HUSL

Странно работает position absolute при добавлении через JS

Ответы (1 шт):