0

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

<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?

2 ответа 2

0

Можно исходить из того что есть еще +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>

-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. А дальше в зависимости от длины массива делаем то что нужно. Если не правильно понял, спрашивайте что не так.

3
  • 3
    С каких пор в else пишутся условия?
    – rusgeli
    Commented 28 нояб. 2022 в 9:11
  • Наверное он имел ввиду, else if, но впринципе вариант хороший, надо пробывать, только проблема в том, что я вообще не знаю js и как в нём прописывать стили, особенно с медиавыражениями Commented 28 нояб. 2022 в 10:22
  • Можно ли изменить этот код для того, чтобы выполнить следующию цель: если кол-во <a> 1, то добавить в <dl> класс one, для двух two и тд, и для каждого из них можно будет задать нужные параметры в css Commented 28 нояб. 2022 в 11:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.