Задать вопрос
@Andress84
javascript

Как доработать document.querySelector?

Есть скрипт, который удаляет класс gsap-reveal-hero , на мобильных экранах, но проблема в том, что он удаляет класс только на одном элементе.
Как доработать, чтобы было множественное удаление класса на всех элементах, где есть класс gsap-reveal-hero ??

document.addEventListener('DOMContentLoaded', function () {
    if (window.innerWidth < 767) {
        document.querySelector('.heading').classList.remove('gsap-reveal-hero');
    } else {
        document.querySelector('.heading').classList.add('gsap-reveal-hero');
    }
});
  • Вопрос задан
  • 160 просмотров
7 комментариев
Подписаться 2 Простой 7 комментариев
Решения вопроса 1
@SergeiB 
document.addEventListener('DOMContentLoaded', function() {
  const headings = document.querySelectorAll('.heading');

  headings.forEach(heading => heading.classList.toggle('gsap-reveal-hero', window.innerWidth >= 768));
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Если я правильно понял, то как-то так(При ширине меньше 767 цвет черный) 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p class="gsap-reveal-hero heading">1</p>
<p class="gsap-reveal-hero heading">2</p>
<p class="gsap-reveal-hero heading">3</p>
<p class="gsap-reveal-hero heading">4</p>
</body>
<style>
    .gsap-reveal-hero{
        color: blueviolet;
    }
</style>
<script>
    let heading = Array.from(document.querySelectorAll('.heading'))
    document.addEventListener('DOMContentLoaded', function () {
   heading.forEach(function(item){
        if (window.innerWidth < 767) {
       item.classList.remove('gsap-reveal-hero');
    } else {
        item.classList.add('gsap-reveal-hero');
    }
    })
});
</script>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Прогнозирование поломок с помощью модели ARIMA на имеющемся датасете
22 дек. 2024, в 15:29
2000 руб./за проект
Разработать Extension для Google Chrome Webstore
22 дек. 2024, в 14:07
15000 руб./за проект
Нписать индикатор на языке Pine Script для TradingView
22 дек. 2024, в 13:01
50000 руб./за проект
Ещё заказы