Как проверить, что элемент имеет нужный класс в javascript?

Пользователь

от roxanne.hauck , в категории: JavaScript , 2 года назад

Как проверить, что элемент имеет нужный класс в javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от nelle , 2 года назад

@roxanne.hauck 

Чтобы проверить, имеет ли элемент нужный класс в JavaScript, можно использовать свойство classList элемента и метод contains().


Например, если у вас есть элемент <div> с идентификатором myDiv, и вы хотите проверить, имеет ли он класс myClass, вы можете использовать следующий код:

1
2
3
4
5
6
var myDiv = document.getElementById("myDiv");
if (myDiv.classList.contains("myClass")) {
  // Код, который будет выполнен, если элемент имеет класс "myClass"
} else {
  // Код, который будет выполнен, если элемент не имеет класса "myClass"
}


В этом примере метод classList.contains() проверяет, содержит ли список классов элемента класс "myClass". Если класс "myClass" присутствует, метод вернет true, и код внутри первого блока if будет выполнен. Если класс "myClass" отсутствует, метод вернет false, и код внутри блока else будет выполнен.


Если вы хотите проверить, имеет ли элемент несколько классов, вы можете использовать метод classList.contains() для каждого класса или свойство classList для получения списка всех классов элемента в виде массива. Например:

1
2
3
4
5
6
7
// Проверка наличия нескольких классов:
if (myDiv.classList.contains("class1") && myDiv.classList.contains("class2")) {
  // Код, который будет выполнен, если элемент имеет оба класса "class1" и "class2"
}

// Получение массива всех классов элемента:
var classList = myDiv.classList;


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

Пользователь

от ciara , год назад

@roxanne.hauck 

В общем случае, вы можете использовать одну из следующих методов для проверки наличия класса у элемента:

  1. Метод classList.contains() - этот метод проверяет, содержит ли элемент указанный класс и возвращает логическое значение true или false. Пример использования:
1
2
3
4
5
6
var element = document.getElementById("myElement");
if (element.classList.contains("myClass")) {
  // код, который будет выполнен, если у элемента есть класс "myClass"
} else {
  // код, который будет выполнен, если у элемента нет класса "myClass"
}


  1. Метод className.includes() - этот метод позволяет проверить, содержит ли строка с классами элемента указанный класс. Пример использования:
1
2
3
4
5
6
var element = document.getElementById("myElement");
if (element.className.includes("myClass")) {
  // код, который будет выполнен, если у элемента есть класс "myClass"
} else {
  // код, который будет выполнен, если у элемента нет класса "myClass"
}


  1. Метод nodeName.toLowerCase() - если вам нужно проверить, является ли элемент конкретным типом элемента (например, ), и у вас нет доступа к классу элемента, вы можете использовать этот метод в сочетании с условным оператором. Пример использования:
1
2
3
4
5
6
var element = document.getElementById("myElement");
if (element.nodeName.toLowerCase() === "div") {
  // код, который будет выполнен, если элемент является <div>
} else {
  // код, который будет выполнен, если элемент не является <div>
}


Обратите внимание, что методы classList и className доступны только у элементов DOM, а не у строк или объектов.