Home / Questions / 280121
Accepted
Popularfan
Asked: 2020-07-20 03:09:39 +0800 CST 2020-07-20 03:09:39 +0800 CST

Как узнать, есть ли у элемента класс?

  • 772

У меня есть этот элемент:

<input id="Nombre" class="clase1 clase2 clase3" type="text" />

в JavaScript я могу получить такой элемент:

var item = document.getElementById("Nombre");

Теперь, как я могу узнать, содержит ли элемент "item" класс "clase2"

То есть, как я могу узнать, есть ли у элемента класс?

javascript

4 Answers

  1. Best Answer

    Вы можете использовать свойство (только для чтения) classList, которое возвращает строку с разными классами, разделенными пробелами (как в вашем случае HTML):

    var item = document.getElementById("Nombre");
document.write( '<br>', item.classList );
    <p id="Nombre" class="clase1 clase2 clase3" >
Párrafo

    Он имеет несколько полезных методов, таких как contains( ):

    var item = document.getElementById("Nombre");
var hasClase2 = item.classList.contains( 'clase2' );
document.write( '<br>', 'Tiene la clase "clase2": ', hasClase2 );
    <p id="Nombre" class="clase1 clase2 clase3">
Párrafo

    Список поддерживаемых методов:

    добавить( Строка [, Строка] )

    Добавьте указанные классы. Если эти классы существуют в атрибуте элемента, они будут проигнорированы.

    удалить( Строка [, Строка] )

    Удалить указанные классы. Примечание. Удаление несуществующего класса НЕ вызывает ошибки.

    номер предмета)

    Возвращает значение класса по индексу в коллекции.

    переключить (Строка [, сила])

    Когда присутствует только один аргумент: переключает значение класса; например, если класс существует, он удаляет его и возвращает false, если нет, он добавляет его и возвращает true.
    Когда присутствует второй аргумент: если второй аргумент имеет значение true, указанный класс добавляется, а если он оценивается как false, он удаляется.

    содержит (строка)

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

    заменить (старый класс, новый класс)

    Заменяет существующий класс новым.

    • 19

  2. Если вы хотите создать условное выражение на основе того, имеет ли элемент класс, вы можете сделать это очень быстро:

    if (document.querySelector("#nombre.clase2")) {
  document.write("Esto solo se ejecuta si el elemento con id 'nombre' tiene la clase 'clase2'")
} else {
  document.write = "Se ejecuta si no la tiene"
}
    <input id="nombre" class="clase2">

    • 4

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

    В Javascript .classNameвы можете увидеть все классы, которые элемент имеет в виде строки.

    .classNameвы могли бы сослаться на a, .classList.valueтак как они оба дают строку, а не массив, как это было бы само по .classListсебе.

    var input = document.getElementById("Nombre");
// con .className obtienes todas las clases que pueda poseer un elemento
document.write(input.className);
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

    По-другому вы можете использовать .classListили .classList.valueкак я объяснял ранее

    Помните, что он .classListвозвращает только массив , а не строку , он возвращает .classList.valueтолько строку всех классов с этим свойством.

    var input = document.getElementById("Nombre"); document.write(input.classList)
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

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

    Этот метод возвращает свое значение, когда вы комбинируете его с другим свойством (см. последний пример)

    var input = document.getElementById("Nombre"); document.write('Posee la clase "clase2":' + ' ' + input.classList.contains("clase2")); 
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>

    Другой вариант, который у вас есть, — использовать комбинацию свойств, упомянутых выше, например:

    Чтобы увидеть, как это работает, измените класс «clase2», который вы ищете.

    Этот метод не работает, .classNameпотому что это не массив

    var input = document.getElementById("Nombre");
if (input.classList.contains("clase2")){  
document.write(input.classList + " " + "<br>" + "<b>Si posee la clase2</b>") } 
else { document.write(input.classList + "<br>" + "<b>No posee la clase que buscas") };
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

    • 2

  4. если вы хотите использовать атрибут this элемента, вы уделяете ему внимание

         $("input[type=email],input[type=password],input[type=text]").focusout(function () {
         if (this.classList.contains("obligatorio")) {  
             console.log("el input tiene clase obligatorio")
         } else {
             console.log("el input tiene clase obligatorio")
             }

        });

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

    • 0