Задать вопрос
@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');
    }
});
  • Вопрос задан
  • 159 просмотров
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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Модель управления электродвигателем в Matlab, Simulink
24 апр. 2024, в 06:52
5000 руб./за проект
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Ещё заказы