@Andress84

Как доработать 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');
    }
});
  • Вопрос задан
  • 150 просмотров
Пригласить эксперта
Ответы на вопрос 2
@SergeiB
document.addEventListener('DOMContentLoaded', function() {
  const headings = document.querySelectorAll('.heading');

  headings.forEach(heading => heading.classList.toggle('gsap-reveal-hero', window.innerWidth >= 768));
});
Ответ написан
Комментировать
noder_ss
@noder_ss
Человек хороший, вёрстка по душе
Если я правильно понял, то как-то так(При ширине меньше 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>
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы