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

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

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

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

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

Решения вопроса 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 ещё

Как инклюдить файлы js?

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

• JavaScript

Почему не работает onclick?

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

• JavaScript
• +1 ещё

Сделать видео или запросить секвенцию картинок?

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

• JavaScript

Можно ли ещё сократить код?

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

• JavaScript
• +1 ещё

Какая js-библиотека может распознавать русскую речь офлайн?

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

• JavaScript

Как можно реализовать простой фильтр на WordPress?

• 1 подписчик
• вчера
• 62 просмотра

• JavaScript
• +1 ещё

Как удобавить html контент в CKeditor 5?

• 1 подписчик
• вчера
• 37 просмотров

• JavaScript

Как создать объект из массивов разной длинны. keys = [key1, key2, key3] values = [value1, value2, value3, value4, valu5, value6]. На выходе: <>?

• 1 подписчик
• вчера
• 116 просмотров

• JavaScript
• +2 ещё

Как подключить код из .js в main.js через @@include?

• 1 подписчик
• вчера
• 66 просмотров

• JavaScript

Как сделать кнопку для удаление на js или jquery данных из массива localstorage?

• 1 подписчик
• вчера
• 61 просмотр

от 150 000 до 300 000 ₽

от 200 000 до 600 000 ₽

Zaymigo • Нижний Новгород

29 окт. 2023, в 06:49

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

29 окт. 2023, в 01:44

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

28 окт. 2023, в 23:32

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

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

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

• Какой курс по asp.net core вы можете посоветовать?
  • 4 подписчика
  • 1 ответ
  • 3 подписчика
  • 2 ответа
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа
  • 3 подписчика
  • 0 ответов
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 2 ответа

  Проверить наличие CSS класса в javascript

  Как проверить наличие или отсутствие класса у элемента на чистом javascript? Необходимо добавить класс элементу по клику, но при этом проверить наличие у него этого класса перед добавлением, чтобы класс не дублировался. вот код:

  var cells = document.getElementsByTagName('td'); for(var i=0; i function selectDate()

  ссылка на полный код jsfiddle
  Отслеживать
  2,139 1 1 золотой знак 13 13 серебряных знаков 21 21 бронзовый знак
  задан 4 дек 2015 в 11:51
  1,549 8 8 золотых знаков 24 24 серебряных знака 51 51 бронзовый знак

  4 ответа 4

  Сортировка: Сброс на вариант по умолчанию

  Вам поможет метод classList.contains вместо className

  contains ( String )
  Проверяет, есть ли данный класс у элемента (вернет true или false)

  использовать можно так:

  if(this.classList.contains('active')) 

  где this должен быть html-элементом.

  Отслеживать
  ответ дан 4 дек 2015 в 11:57
  80.6k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
  Отличная штука. Не знал. Спасибо
  4 дек 2015 в 11:59
  @tutankhamun, они постепенно расширяют интерфейсы дом элементов 🙂
  4 дек 2015 в 12:00
  Так скоро jQuery не понадобится в 95% случаев, в который он сейчас почти необходим 🙂
  4 дек 2015 в 12:05
  @tutankhamun, а в каких например он сейчас почти необходим?
  4 дек 2015 в 12:06

  Я вот уже и не уверен, что знаю ответ на ваш вопрос 🙂 Внедрение document.querySelector() и document.querySelectorAll() очень сильно подорвало фундамент jQuery. Получается что в сухом остатке только поддержка старых браузеров

  4 дек 2015 в 12:12

  Можно воспользоваться следующей функцией:

  function hasClass(element, className)

  Плюс такого решения — работает даже на древних браузерах

  Отслеживать
  ответ дан 4 дек 2015 в 11:58
  tutankhamun tutankhamun
  11.3k 5 5 золотых знаков 25 25 серебряных знаков 40 40 бронзовых знаков
  пока сложновато для меня. это чистый js?
  4 дек 2015 в 12:01
  @MarinaVoronova, чище некуда 🙂
  4 дек 2015 в 12:01

  сделала так — по клику добавляется класс и удаляется при повторном клике. вот код:

  var cells = document.getElementsByTagName('td'); for(var i=0; i function selectDate()< if(this.classList.contains('active'))< this.classList.remove('active'); >else < this.classList.add('active'); >> 

  ссылка на полный код: jsfiddle

  Отслеживать
  2,139 1 1 золотой знак 13 13 серебряных знаков 21 21 бронзовый знак
  ответ дан 11 дек 2015 в 3:58
  1,549 8 8 золотых знаков 24 24 серебряных знака 51 51 бронзовый знак

  Вместо того, чтобы городить такой if, раз уж Вы используете classList , можно воспользоваться готовой функцией: classList.toggle(‘active’) . И совет, ставить обработчики в цикле не хорошо, лучше повесить его на родителя, так шустрее будет работать.

  11 дек 2015 в 7:37
  спасибо, сработало)
  11 дек 2015 в 8:58
  Вместо того, что у Вас в selectDate()<> надо написать проcто this.classList.toggle(‘active’)
  11 дек 2015 в 8:58
  да, я уже применила jsfiddle.net/lilubanana/fwxuf5ea/29
  11 дек 2015 в 8:59

  и еще, для понимания, могу я использовать функцию toggle если не подключена jquery? у меня все работает, но если браузер будет старый?

  11 дек 2015 в 10:09

  Если нужно проверить именно наличия класса то используйте такую конструкцию

  !!~elem.getAttribute("class").indexOf("my__class") 

  classList.toggle('active') 

  добавляет класс при его отсутствие и удаляет при его наличии.

  parent.contains(child) 

  Возвращает true, если parent содержит child или parent == child То есть если у нас несколько child то придется проверять в цикле. Да и опять же вложенность

  Отслеживать
  ответ дан 27 янв 2020 в 8:24
  Дмитрий Бабанин Дмитрий Бабанин
  33 6 6 бронзовых знаков

  !!~elem.getAttribute(«class»).indexOf(«my__class») — плохой вариант, например зацепит my__class1 , ну и читаемость ужасная лучше обычный if, чем !!~

  27 янв 2020 в 16:04

  1. js насколько я знаю все задачи делаются для определенной цели. Если конечно у человека будут в одном элементе содержать классы active + no-active + active-elem. То да. Нужно делать через регулярки. 2. Вы вообще знаете для чего конструкция предназначена !!~ ? При чем тут «лучше обычный if, чем !!~» .

  28 янв 2020 в 8:25

  При том, что намного проще читается обычное сравнение с -1 чем куча спец символов идущих друг за другом 🙂 собственно и такой конструкции !!~ в языке нет, это ж просто куча унарных операторов и для большей экспрессии можно и 10 восклицательных знаков поставить 🙂

  29 янв 2020 в 7:49

  по вашему конструкция if( -1 == elem.getAttribute(«class»).indexOf(«my__class»)) читается лучше чем if(~elem.getAttribute(«class»).indexOf(«my__class»)) ?

  Проверить, существует ли элемент с данным классом в JavaScript/jQuery

  В этом посте мы обсудим, как проверить, существует ли элемент с заданным классом в JavaScript и jQuery.

  1. Использование jQuery

  jQuery .hasClass() метод возвращает true, если указанный класс назначен элементу. Например, следующее вернет true, если div содержит container как класс.

  JS

  $ ( document ) . ready ( function ( ) < if ( $ ( 'div' ) . hasClass ( 'container' ) ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;

  HTML

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

  JS

  $ ( document ) . ready ( function ( ) < if ( $ ( 'div.container' ) [ 0 ] ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;

  HTML

  Кроме того, вы можете проверить длину объекта jQuery, возвращаемого селектором класса, для лучшей читабельности.

  JS

  $ ( document ) . ready ( function ( ) < if ( $ ( 'div.container' ) . length ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;

  HTML

  2. Использование JavaScript

  С помощью JavaScript вы можете использовать встроенный в JavaScript getElementsByClassName() функция. Однако это определяет, существует ли класс или нет, но не идентифицирует элемент, связанный с классом.

  JS

  if ( document . getElementsByClassName ( ‘container’ ) . length ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;

  HTML

  Чтобы настроить таргетинг на элемент с его идентификатором, используйте querySelector() функция.

  JS

  if ( document . querySelector ( ‘div.container’ ) !== null ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;

  HTML

  Другим приемлемым способом является использование classList собственность с getElementById() функция.

  JS

  var div = document . getElementById ( ‘outerdiv’ ) ;
  if ( div . classList . contains ( ‘container’ ) ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;

  HTML

  Это все, что касается определения того, существует ли элемент с данным классом в JavaScript и jQuery.

  Оценить этот пост

  Средний рейтинг 4.83 /5. Подсчет голосов: 23

  Голосов пока нет! Будьте первым, кто оценит этот пост.

  Сожалеем, что этот пост не оказался для вас полезным!

  Расскажите, как мы можем улучшить этот пост?

  Спасибо за чтение.

  Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

  Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂

  Подписывайся
  1 Комментарий
  Большинство голосов
  Новейшие Самый старый
  Встроенные отзывы
  Просмотреть все комментарии
  Просмотр комментариев
  Загрузить больше комментариев
  Просматривать
  Подпишитесь на новые публикации

  • Все проблемы
  • Практика DSA
  • 100 самых популярных задач
  • 50 лучших классических задач
  • Лучшие алгоритмы
  • Компилятор С/С++
  • Компилятор Java
  • Компилятор Python
  • Компилятор JavaScript
  • компилятор PHP
  • Компилятор C#
  • Свяжитесь с нами
  • Политика конфиденциальности
  • условия обслуживания
  • Подпишитесь на новые публикации

  Techie Delight © 2023 Все права защищены.

  Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно

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

  

  Как проверить наличие у элемента класса CSS БЕЗ Jquery
  Подскажите как проверить наличие у элемента класса CSS БЕЗ использования Jquery? хочу написать.

  Как проверить наличие элемента и если он есть удалить его по клику
  Приветствую, у меня есть код: var modalbtn=document.querySelectorAll(".modal__btn"); for (var i =.

  Как проверить наличие одного элемента в другом?
  Необходимо перебрать все элементы массива liMenu и, в случае, если элемент массива содержит.

  Проверить наличие класса у дочерних элементов через путешествие по DOM
  Доброго времени суток. Возникла такая задача, есть несколько блоков <section> <div.

  707 / 309 / 191
  Регистрация: 05.03.2015
  Сообщений: 822
  Сразу несколько ошибок. Сначала рабочий код:

  1 2 3 4 5

  var d = document.getElementsByClassName("btn")[0]; if (d.classList.contains("checked")) { alert("ура"); }

  Ошибки:
  1) document.getElementByClassName — такого селектора нет, есть getElementsByClassName, возвращающий массивоподобный объект.
  2) hasClassName — такого метода тоже не существует. Однако альтернатив много: приведенный в коде выше, d.className.indexOf(«checked») !== -1 или jquery метод $(el).hasClass(‘checked’)
  2.2) Все варианты проверки классов выше (существуют еще, но тем не менее) проверяют наличие классов БЕЗ точки.
  3? после алерта страница перезагрузится. Скорее всего вам нужно будет от этого избавиться, так что смотрите в сторону метода event.preventDefault()

  87844 / 49110 / 22898
  Регистрация: 17.06.2006
  Сообщений: 92,604
  Помогаю со студенческими работами здесь

  

  Проверить наличие текста до и после элемента
  Здравствуйте. Не могу победить возникшую задачу. Мне необходимо перед и после блока с классом.

  Проверить наличие объекта класса
  Есть класс. Можно ли как-то узнать, есть ли уже созданный объект этого класса? Как?

  Как проверить наличие элемента в массиве
  Есть предупреждение NOTICE: UNDEFINED INDEX: 10 IN TEST.PHP ON LINE 27 Как заранее проверить.

  Как проверить наличие элемента в XML
  При парсинге XML файла необходимо проверить есть ли элемент <keywords>. При запуске файла второй.

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

  1. Libreoffice draw как пользоваться
  2. Как отменить коммит в svn
  3. Как отправить embed сообщение discord от своего имени
  4. Как работает php fpm