1

Есть элемент с id: one.

Как проверить наличие class: open-tab у этого элемента?

<div class="works-container">
	<div class="row-tab" id="tabs">
		<div class="tab-button open-tab" id="b_one"></div>
		<div class="tab-button" id="b_two"></div>
		<div class="tab-button" id="b_three"></div>
		<div class="tab-button" id="b_four"></div>
	</div>
	<div class="tabs open-tab" id="one"></div>
	<div class="tabs" id="two"></div>
	<div class="tabs" id="three"></div>
	<div class="tabs" id="four"></div>
</div>

1 ответ 1

4

У DOM элементов есть свойство classList, которое возвращает псевдомассив. У него есть методы, и одним из них является contains. Он проверяет, есть ли у элемента класс.

Element.classList

Описание

Свойство classList возвращает псевдомассив DOMTokenList, содержащий все классы элемента.

У classList есть примитивная альтернатива - свойство className, которое содержит значение атрибута class элемента.

Методы

ClassList является геттером. Возвращаемый им объект имеет несколько методов:

add( String [,String] )

Добавляет элементу указанные классы

remove( String [,String] )

Удаляет у элемента указанные классы

item ( Number )

Результат аналогичен вызову сlassList[Number]

toggle ( String [, Boolean])

Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.

Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.

contains ( String )

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

И, конечно же, у ClassList есть заветное свойство length, которое возвращает количество классов у элемента.

Источник: Element.classList

console.log(document.getElementById("one").classList.contains("open-tab"));
<div class="works-container">
  <div class="row-tab" id="tabs">
    <div class="tab-button open-tab" id="b_one"></div>
    <div class="tab-button" id="b_two"></div>
    <div class="tab-button" id="b_three"></div>
    <div class="tab-button" id="b_four"></div>
  </div>
  <div class="tabs open-tab" id="one"></div>
  <div class="tabs" id="two"></div>
  <div class="tabs" id="three"></div>
  <div class="tabs" id="four"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.