Задать стили при переполнении контента

Рейтинг: 0Ответов: 1Опубликовано: 01.02.2023

Как мне задать определенные css стили, при условии, если элементов(кнопок) в списке станет больше при переполнении контента? Изначально данные стили не нужны, только когда элементов станет больше 4 шт.

<article class="podcast-cart">
   <div class="podcast-cart-counter">
    <button class="podcast-cart__counter-btn-play  podcast-counter__item"></button>
    <button class="podcast-cart__counter-btn-pause  podcast-counter__item"></button>
  </div>
</article>

пытаюсь сделать так - не работает


let podcastList = document.querySelectorAll('.podcast-cart');

podcastList.forEach(item => {
  let podcastCounterItem = document.querySelector('.podcast-counter__item');

   if (podcastCounterItem > 4) {
    podcastCounterItem.style.padding = "10px 0";
   }
});
css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1

Отбираем все блоки с .podcast-cart и смотрим сколько в них элементов с .podcast-counter__item. Если больше 4х, то блоку с текущим .podcast-cart назначаем класс

let podcastList = document.querySelectorAll('.podcast-cart');

podcastList.forEach(item => {
  const elems = item.querySelectorAll('.podcast-counter__item');

  if (elems.length > 4) {
    item.style.padding = "10px 0";
  }
});