Динамический отступ через JS в зависимости от кол-ва дочерних элементов

Question

У нас есть код:

<div class="column2">
  <dl class="contacts details">
    <h3 class="contacts">Contacts:</h3>
    <a class="Website Icons" href="https://test.com/"></a>
    <a class="Kik Icons" href="https://www.kik.me/test"></a>
    <a class="Snap Icons" href="https://www.snapchat.com/add/test"></a>
    <a class="Telegram Icons" href="https://t.me/sexygirlsgonude"></a>
  </dl>
</div>

нужно при a.Icons = 6

@media (min-width: 302.5px) and (max-width: 766.5px)

.contacts.details {
    width: 100%;
    text-align: center;
    margin-left: -10%;
}

при а.Icons = 1

.contacts.details {
    width: 100%;
    text-align: center;
    margin-left: -20%;
}

Как реализовать через JS?

Answer 1

const bl = document.querySelector('.column2');
const aitems = bl.getElementsByTagName('a');
const arr = Array.from(aitems);
if (arr.length === 6) {
    //присваиваем стиль блоку dl, отступ 10%
} else if (arr.length ===1) {
    //присваиваем стиль блоку dl, отступ 20%
}

получим массив ссылок в элементе с классом .column2. А дальше в зависимости от длины массива делаем то что нужно. Если не правильно понял, спрашивайте что не так.

Answer 2

Можно исходить из того что есть еще +1 заголовок т.е. дочерних иконок на 1 меньше с учетом этого. Смещения можно хранить в массиве. 0% по умолчанию. Если есть формула смещения, то еще лучше.

const shifts = {1: -20, 6: -10}
const allParents = document.querySelectorAll('.contacts.details')
for (const parent of allParents){
    parent.style.marginLeft =
      `${shifts[Array.from(parent.children).length - 1] || 0 }%`
}

body {
   display: flex;
   flex-direction: column;
}

.contacts.details {
    width: 100%;
    text-align: center;
    
}

<div class="column2">
  <dl class="contacts details">
    <h3 class="contacts">Contacts:</h3>
    <a class="Website Icons" href="https://test.com/">1</a>
    <a class="Kik Icons" href="https://www.kik.me/test">2</a>
    <a class="Snap Icons" href="https://www.snapchat.com/add/test">3</a>
    <a class="Telegram Icons" href="https://t.me/sexygirlsgonude">4</a>
    <a class="Telegram Icons" href="https://t.me/sexygirlsgonude">5</a>
    <a class="Telegram Icons" href="https://t.me/sexygirlsgonude">6</a>
  </dl>
</div>
<div class="column2">
  <dl class="contacts details">
    <h3 class="contacts">Contacts:</h3>
    <a class="Website Icons" href="https://test.com/">1</a>
    
  </dl>
</div>

БЛОГ НА HUSL

Динамический отступ через JS в зависимости от кол-ва дочерних элементов

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