Как проверить есть ли класс у элемента js

Как проверить наличие класса у одного из блоков div?

Как проверить наличие класса .on хотя-бы у одного из блоков div?

• Вопрос задан более трёх лет назад
• 10490 просмотров

Комментировать

Решения вопроса 3

Ярослав Иванов @space2pacman

Просто царь.

document.querySelector(".my").classList.contains("on") // true/false

Ответ написан более трёх лет назад

Комментировать

Нравится 3 Комментировать

Старый прогер

document.querySelector(‘.my.on’) !== null

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

if($('.my').hasClass('on'))

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Ответы на вопрос 0

Ваш ответ на вопрос

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

• JavaScript
• +1 ещё

Как создать форму калькулятор отправкой на емайл?

• 1 подписчик
• 14 минут назад
• 22 просмотра

• JavaScript
• +1 ещё

Почему popup окно открывается только со второго нажатия?

• 1 подписчик
• 39 минут назад
• 13 просмотров

• JavaScript
• +3 ещё

Как сделать ограничитель поля символов?

• 1 подписчик
• час назад
• 28 просмотров

• JavaScript

Почему не получается обработать response с сервера?

• 1 подписчик
• 3 часа назад
• 72 просмотра

• JavaScript

Не могу как расшифровать js, можете помочь?

• 1 подписчик
• 10 часов назад
• 103 просмотра

• JavaScript
• +1 ещё

Как открыть модальное окно bootstrap при навидению?

• 1 подписчик
• 12 часов назад
• 92 просмотра

• JavaScript

Как динамически у квиза вывести шаги и давать класс активному?

• 1 подписчик
• 18 часов назад
• 122 просмотра

• JavaScript
• +1 ещё

Реакция на лайк в боте vk js?

• 1 подписчик
• 22 часа назад
• 55 просмотров

• JavaScript

Суммa элeментoв пoд чeтными индeксaми?

• 2 подписчика
• вчера
• 195 просмотров

• JavaScript

Как при помощи swiper добиться такого расположения слайдов?

• 2 подписчика
• вчера
• 98 просмотров

от 20 000 до 30 000 ₽

До 350 000 ₽

от 5 500 до 6 500 $

08 янв. 2024, в 15:37

90000 руб./за проект

08 янв. 2024, в 14:52

2500 руб./в час

08 янв. 2024, в 14:44

1500 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

• Есть ли не официальные аналоги миджорни апи?
  • 3 подписчика
  • 1 ответ
  • 4 подписчика
  • 1 ответ
  • 3 подписчика
  • 0 ответов
  • 3 подписчика
  • 3 ответа
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 4 ответа
  • 2 подписчика
  • 3 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 2 ответа

  Как проверить наличие класса у элемента?

  

  Привет, подскажите как правильно реализовать такую вот штуку:

  В JS не силен, но попытался сделать вот так:

  setInterval(function() < if($('.owl-pagination .hard').hasClass('active'))< $('.owl-pagination .owl-page').removeClass('active_slide'); >>, 200); setInterval(function() < if($('.owl-pagination .data').hasClass('active'))< $('.owl-pagination .owl-page').removeClass('active_slide'); $('.owl-pagination .hard, .owl-pagination .data').addClass('active_slide'); >>, 200); setInterval(function() < if($('.owl-pagination .sdk').hasClass('active'))< $('.owl-pagination .owl-page').removeClass('active_slide'); $('.owl-pagination .hard, .owl-pagination .data, .owl-pagination .sdk').addClass('active_slide'); >>, 200); setInterval(function() < if($('.owl-pagination .connect').hasClass('active'))< $('.owl-pagination .owl-page').removeClass('active_slide'); $('.owl-pagination .hard, .owl-pagination .data, .owl-pagination .sdk, .owl-pagination .connect').addClass('active_slide'); >>, 200); setInterval(function() < if($('.owl-pagination .server').hasClass('active'))< $('.owl-pagination .owl-page').removeClass('active_slide'); $('.owl-pagination .hard, .owl-pagination .data, .owl-pagination .sdk, .owl-pagination .connect, .owl-pagination .server').addClass('active_slide'); >>, 200); setInterval(function() < if($('.owl-pagination .processing').hasClass('active'))< $('.owl-pagination .owl-page').removeClass('active_slide'); $('.owl-pagination .hard, .owl-pagination .data, .owl-pagination .sdk, .owl-pagination .connect, .owl-pagination .server, .owl-pagination .processing').addClass('active_slide'); >>, 200); setInterval(function() < if($('.owl-pagination .solution').hasClass('active'))< $('.owl-pagination .owl-page').removeClass('active_slide'); $('.owl-pagination .hard, .owl-pagination .data, .owl-pagination .sdk, .owl-pagination .connect, .owl-pagination .server, .owl-pagination .processing, .owl-pagination .solution').addClass('active_slide'); >>, 200);

  Суть заключается в том что, например когда у нас активен 3 слайд — 1 и 2 добавляется класс active_slide, если активен последний, т.е. 7 — активны все 6, т.е им тоже добавляется класс active_slide.
  Не ругайте знаю что сделано кастыльно, по этому и прошу Вашей помощи, как это правильно реализовать.
  Спасибо

  • Вопрос задан более трёх лет назад
  • 3743 просмотра

  Element: свойство classList

  Element.classList — это доступное только для чтения свойство, которое содержит текущую коллекцию DOMTokenList всех атрибутов class элемента.

  Использование classList представляет более удобный способ, чем доступ к списку классов элемента в виде строки, разделенной пробелами, через element.className .

  Значение

  DOMTokenList представляет содержимое атрибута class элемента. Если атрибут class не установлен или пуст, то будет возвращён пустой DOMTokenList , то есть DOMTokenList со свойством length равным 0 .

  Хотя само свойство classList доступно только для чтения, можно изменять связанный с ним DOMTokenList с помощью методов add() (en-US), remove() (en-US), replace() и toggle() (en-US).

  Для проверки, содержит ли элемент какой-либо класс можно использовать метод classList.contains() (en-US).

  Примеры

  const div = document.createElement("div"); div.className = "foo"; // Начальное состояние: console.log(div.outerHTML); // Используем classList API для удаления и добавления классов div.classList.remove("foo"); div.classList.add("anotherclass"); // console.log(div.outerHTML); // Если класс "visible" присутствует в списке классов, то он будет удалён, а иначе наоборот добавлен div.classList.toggle("visible"); // Добавление/удаление класса "visible" в зависимости от условия, передаваемого вторым аргументом div.classList.toggle("visible", i  10); // false console.log(div.classList.contains("foo")); // Добавление или удаление нескольких классов сразу div.classList.add("foo", "bar", "baz"); div.classList.remove("foo", "bar", "baz"); // Добавление или удаление нескольких классов с использованием spread-синтаксиса const cls = ["foo", "bar"]; div.classList.add(. cls); div.classList.remove(. cls); // Замена класса "foo" классом "bar" div.classList.replace("foo", "bar"); 

  Спецификации

  Specification
  DOM Standard # ref-for-dom-element-classlist①

  Совместимость с браузерами

  BCD tables only load in the browser

  Смотрите также

  • element.className
  • DOMTokenList
  • classList.js (кросс-браузерный полифил, реализующий функциональность element.classList )

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 10 дек. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  .class List

  Динамически читаем, добавляем и удаляем классы у элементов.

  Время чтения: меньше 5 мин

  Открыть/закрыть навигацию по статье

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
     1. classList.add()
     2. classList.remove()
     3. classList.replace()
     4. classList.toggle()
     5. classList.contains()
     6. Имена классов
     1. Егор Огарков советует

     Контрибьюторы:

     Обновлено 9 января 2023

     Кратко

     Скопировать ссылку «Кратко» Скопировано

     Свойство class List даёт возможность просматривать и манипулировать классами элемента.

     Пример

     Скопировать ссылку «Пример» Скопировано

      const button = document.querySelector('button') // добавили классbutton.classList.add('active')// удалили классbutton.classList.remove('active')// вернет false, так как такого класса у элемента нетbutton.classList.contains('active') const button = document.querySelector('button') // добавили класс button.classList.add('active') // удалили класс button.classList.remove('active') // вернет false, так как такого класса у элемента нет button.classList.contains('active')    Скопировать Скопировано Не удалось скопировать   

     Как понять

     Скопировать ссылку «Как понять» Скопировано

     Управлять классами элемента — одна из распространённых задач, потому браузеры предоставляют встроенные средства для решения такой задачи. В свойстве class List элемента содержится специальный объект, который хранит информацию о текущих классах элемента и содержит методы для работы с ними.

      const button = document.querySelector('button') button.classList.add('active')console.log(button.classList[0])// 'active' const button = document.querySelector('button') button.classList.add('active') console.log(button.classList[0]) // 'active'    Скопировать Скопировано Не удалось скопировать   

     Как пишется

     Скопировать ссылку «Как пишется» Скопировано

     У class List есть множество методов, но мы рассмотрим только часто используемые.

     class List . add ( )

     Скопировать ссылку «classList.add()» Скопировано

     Этот метод используется для добавления класса к элементу. В качестве аргументов нужно передавать строку с именем класса.

     Добавим элементу класс animate :

      const element = document.querySelector('div') element.classList.add('animate') const element = document.querySelector('div') element.classList.add('animate')    Скопировать Скопировано Не удалось скопировать   

     Можно так же передать несколько строк-аргументов, тогда добавится несколько классов:

      const element = document.querySelector('div') // Добавятся классы black, fade и animateelement.classList.add('black', 'fade', 'animate') const element = document.querySelector('div') // Добавятся классы black, fade и animate element.classList.add('black', 'fade', 'animate')    Скопировать Скопировано Не удалось скопировать   

     Можно не бояться, что один и тот же класс добавится два раза. Если вызвать метод add ( ) и передать уже существующий класс, то он не добавится второй раз.

      const element = document.querySelector('div.header') // Добавится только animate, так как header уже есть на элементеelement.classList.add('header', 'animate') const element = document.querySelector('div.header') // Добавится только animate, так как header уже есть на элементе element.classList.add('header', 'animate')    Скопировать Скопировано Не удалось скопировать   

     class List . remove ( )

     Скопировать ссылку «classList.remove()» Скопировано

     Метод используется для удаления класса у элемента. В качестве аргумента нужно передавать строку с именем класса.

     Предположим, что кнопке назначен единственный класс submit :

      const button = document.querySelector('button.submit') // Убираем классbutton.classList.remove('submit')console.log(button.classList[0]);// undefined const button = document.querySelector('button.submit') // Убираем класс button.classList.remove('submit') console.log(button.classList[0]); // undefined    Скопировать Скопировано Не удалось скопировать   

     В remove ( ) можно передать несколько аргументов и удалится несколько классов

      const elem = document.querySelector('div.banner') // Убираем классы hidden и animatedbutton.classList.remove('hidden', 'animated') const elem = document.querySelector('div.banner') // Убираем классы hidden и animated button.classList.remove('hidden', 'animated')    Скопировать Скопировано Не удалось скопировать   

     class List . replace ( )

     Скопировать ссылку «classList.replace()» Скопировано

     Метод позволяет заменить одно значение класса другим. Метод принимает 2 параметра:

     • название класса, который нужно заменить;
     • название класса, на что нужно заменить.

     После выполнения replace ( ) возвращает boolean-значение, которые сообщает нам об успешности операции:

     • true если класс был заменён;
     • false если ничего не изменилось.

      // На кнопке есть класс hiddenconst button = document.querySelector('button.hidden') // Заменяем класс hidden на visibleconst result = button.classList.replace('hidden', 'visible')console.log(result)// true, класс успешно заменился на visible // Попробуем заменить еще разconst resultAgain = button.classList.replace('hidden', 'visible')console.log(result)// false, потому что ничего не изменилось // На кнопке есть класс hidden const button = document.querySelector('button.hidden') // Заменяем класс hidden на visible const result = button.classList.replace('hidden', 'visible') console.log(result) // true, класс успешно заменился на visible // Попробуем заменить еще раз const resultAgain = button.classList.replace('hidden', 'visible') console.log(result) // false, потому что ничего не изменилось    Скопировать Скопировано Не удалось скопировать   

     class List . toggle ( )

     Скопировать ссылку «classList.toggle()» Скопировано

     Метод можно использовать, чтобы включать или выключать класс. Если при вызове toggle ( ) переданный класс уже есть на элементе, то он будет убран. Если класса не было — то добавлен.

      // На кнопке есть класс hiddenconst button = document.querySelector('button.hidden') // так как класс есть, то он будет убранbutton.classList.toggle('hidden')// А при повторном вызове будет снова добавленbutton.classList.toggle('hidden') // На кнопке есть класс hidden const button = document.querySelector('button.hidden') // так как класс есть, то он будет убран button.classList.toggle('hidden') // А при повторном вызове будет снова добавлен button.classList.toggle('hidden')    Скопировать Скопировано Не удалось скопировать   

     Метод toggle ( ) принимает только один класс для переключения. Опционально вторым аргументом можно передать boolean-значение: метод будет работать как add ( ) , если передать true , и как remove ( ) , если передать false .

      // На кнопке есть класс submitconst button = document.querySelector('button.submit') // Передаём вторым аргументом false и будет работать как remove()button.classList.toggle('submit', false)console.log(button.classList[0]);// undefined, потому что класса больше нет // Передаём true и теперь класс добавитсяbutton.classList.toggle('submit', true) // На кнопке есть класс submit const button = document.querySelector('button.submit') // Передаём вторым аргументом false и будет работать как remove() button.classList.toggle('submit', false) console.log(button.classList[0]); // undefined, потому что класса больше нет // Передаём true и теперь класс добавится button.classList.toggle('submit', true)    Скопировать Скопировано Не удалось скопировать   

     class List . contains ( )

     Скопировать ссылку «classList.contains()» Скопировано

     Метод позволяет проверить наличие класса у элемента. Метод принимает один параметр — строку с названием класса, наличие которого нужно проверить.

     Метод contains ( ) вернёт true если класс есть и false если класса нет.

      // На кнопке есть класс hidden, найдем эту кнопку.const button = document.querySelector('button.hidden') // Проверим, есть ли класс visible на кнопкеconst isVisible = button.classList.contains('visible')console.log(isVisible)// false, класс 'visible' у кнопки отсутствует // Проверим, есть ли класс hidden на кнопкеconst isHidden = button.classList.contains('hidden')console.log(isHidden)// true, класс 'hidden' у кнопки присутствует // На кнопке есть класс hidden, найдем эту кнопку. const button = document.querySelector('button.hidden') // Проверим, есть ли класс visible на кнопке const isVisible = button.classList.contains('visible') console.log(isVisible) // false, класс 'visible' у кнопки отсутствует // Проверим, есть ли класс hidden на кнопке const isHidden = button.classList.contains('hidden') console.log(isHidden) // true, класс 'hidden' у кнопки присутствует    Скопировать Скопировано Не удалось скопировать   

     Имена классов

     Скопировать ссылку «Имена классов» Скопировано

     Классом не может быть строка содержащая пробелы. При попытке передать в аргументах такую строку, будет выброшена ошибка. Это правило касается любого метода в class List .

      const element = document.querySelector('div') element.classList.add('my awesome class')// Ошибка: Uncaught DOMException: String contains an invalid character const element = document.querySelector('div') element.classList.add('my awesome class') // Ошибка: Uncaught DOMException: String contains an invalid character    Скопировать Скопировано Не удалось скопировать   

     На практике

     Скопировать ссылку «На практике» Скопировано

     Егор Огарков советует

     Скопировать ссылку «Егор Огарков советует» Скопировано

     �� Свойство class List является псевдомассивом, поэтому разработчик может обращаться к классам по индексам, как в массиве. При этом новые классы добавляются в конец, а при удалении все классы (и соответственно их индексы) смещаются. При этом class List легко превращается в обычный массив, по которому можно итерироваться любым привычным способом.

      const element = document.querySelector('div') // Через специальный методconst classes = Array.from(element.classList) // Либо через спред-операторconst classes = [. element.classList] // Теперь нам доступны любые операции обычного массиваclasses.map(. )classes.filter(. )classes.reduce(. ) const element = document.querySelector('div') // Через специальный метод const classes = Array.from(element.classList) // Либо через спред-оператор const classes = [. element.classList] // Теперь нам доступны любые операции обычного массива classes.map(. ) classes.filter(. ) classes.reduce(. )    Скопировать Скопировано Не удалось скопировать   

     �� Вместо использования class List можно попробовать пользоваться свойством class Name . Это поле содержит строку с именами всех классов через пробел.

     Предположим у нас есть элемент шапки:

      
     content header class="head theme-light">contentheader>    Скопировать Скопировано Не удалось скопировать   

     В поле class Name будет находиться точно такая же строка, что и в атрибуте элемента class (даже если в ней будут лишние пробелы).

      const head = document.querySelector('header') console.log(head.className);// head theme-light (то же значение, что и в атрбуте class) const head = document.querySelector('header') console.log(head.className); // head theme-light (то же значение, что и в атрбуте class)    Скопировать Скопировано Не удалось скопировать   

     С помощью этого поля можно легко менять класс элемента — достаточно присвоить ему новое значение. Если добавляете несколько классов, то их нужно обязательно указывать через пробел.

      // Используем элемент из предыдущего примераconst head = document.querySelector('div') // Теперь у элемента шапки будет три классаhead.className = 'head theme-dark bordered' // Используем элемент из предыдущего примера const head = document.querySelector('div') // Теперь у элемента шапки будет три класса head.className = 'head theme-dark bordered'    Скопировать Скопировано Не удалось скопировать   

     Однако если с классами приходится работать часто или нужно сделать что-то сложнее, чем просто переопределить класс, то удобнее использовать методы из class List .

     Похожие публикации:

     1. Как сделать форк репозитория github
     2. Как удалить communigate pro
     3. Какое число больше отрицательное или 0
     4. Службы игр microsoft что это