Compruebe si el cuerpo tiene una clase específica usando JavaScript

Compruebe si el cuerpo tiene una clase específica usando JavaScript
Al diseñar una página web o el sitio, puede haber la posibilidad de clasificar funcionalidades similares contra una clase dedicada al final del desarrollador. Por ejemplo, asignar una página web en particular al mismo elemento pero con una clase distinta para hacer las cosas relevantes. En tales situaciones, verificar si un cuerpo tiene una clase específica ayuda a acceder a diversas funcionalidades fácilmente y en los procesos de actualización también.

Este artículo demostrará los enfoques para verificar si un cuerpo tiene una clase específica usando JavaScript.

Cómo verificar si el cuerpo tiene una clase específica usando JavaScript?

Para verificar si un cuerpo tiene una clase específica que usa JavaScript, aplique los siguientes enfoques:

  • "Lista de clase"Propiedad y"contiene()" método.
  • "getElementsBytagName ()" y "fósforo()" métodos.
  • "jQuery".

Ilustremos cada uno de los enfoques uno por uno!

Enfoque 1: Compruebe si el cuerpo tiene una clase específica en JavaScript utilizando la propiedad de clases y contiene () métodos

El "Lista de claseLa propiedad ofrece los nombres de clase CSS de un elemento. Mientras que el "contiene()El método "da verdadero si un nodo es un descendiente. Estos métodos combinados se pueden aplicar para acceder a la clase contenida en el elemento asociado.

Sintaxis

nodo.contiene (desnode)

En la sintaxis anterior:

  • "desnode"Corresponde al descendiente del nodo del nodo asociado.

Ejemplo
Tengamos una descripción general del ejemplo a continuación:


Este es el sitio web de Linuxhint



Aplique los pasos establecidos a continuación, como se indica en el código anterior:

  • En primer lugar, incluya un ""Elemento tiene el atributo establecido"clase".
  • Además, agregue un encabezado dentro del elemento particular ().
  • En el código JS, aplique el "Lista de clase"Propiedad combinada con el"contiene()" método.
  • Esto será el acceso a la clase de lo asociado "Elemento "basado en el nombre de clase especificado en el parámetro del método.
  • Sobre la condición satisfecha, el "si"La condición se ejecutará.
  • Por el contrario, el "demásSe ejecutará el bloque de código de la declaración.

Producción

En la salida anterior, se puede ver que la clase particular se incluye en el "" elemento.

Enfoque 2: Compruebe si Body tiene una clase específica en JavaScript utilizando los métodos GetElementsByTagName () y Match ()

El "getElementsBytagName ()El método "ofrece una colección de todos los elementos que tienen un nombre de etiqueta en particular. El "fósforo()El método "coincide con el valor especificado con la cadena. Estos métodos se pueden utilizar para acceder al elemento requerido por su etiqueta y verificar la clase específica.

Sintaxis

documento.getElementsBytagName (etiqueta)

En la sintaxis proporcionada:

  • "etiqueta"Representa el nombre de la etiqueta del elemento.

Ejemplo
El siguiente ejemplo demuestra el concepto discutido:




En el fragmento de código anterior:

  • Del mismo modo, incluya un ""Elemento tiene la clase especificada.
  • Además, contenga una imagen con las dimensiones establecidas dentro del elemento indicado en el paso anterior.
  • En las líneas de código JavaScript, accede al ""Elemento por su etiqueta usando el"getElementsBytagName ()" método.
  • El "[0]"Indica que el primer elemento correspondiente a la etiqueta indicada en el paso anterior se obtendrá.
  • El "nombre de la clase"Propiedad y la"fósforo()El método "coincidirá con la clase establecida en su parámetro contra el"" elemento.
  • La anterior declaración en el "siLa condición se ejecutará sobre la satisfacción de todas las condiciones en los pasos anteriores.
  • De lo contrario, se mostrará la última declaración.

Producción

La salida anterior indica que la condición aplicada para una clase específica está satisfecha.

Enfoque 3: Compruebe si el cuerpo tiene una clase específica en JavaScript usando jQuery

Este enfoque se puede implementar para acceder al elemento requerido directamente y localizar la clase específica en su contra con la ayuda de su método simplemente.

Ejemplo
Pasemos por el ejemplo dado a continuación:





if ($ ("cuerpo").Hasclass ("contiene"))
alerta ("El elemento corporal tiene clase")

demás
alerta ("El elemento corporal no tiene clase")

En las líneas de código anteriores:

  • Incluir la "jQuery"Biblioteca para utilizar sus funcionalidades.
  • Del mismo modo, incluya el ""Elemento tiene la clase declarada.
  • Además, agregue un ""Elemento dentro del elemento indicado en el paso anterior.
  • En el código JS, acceda al "" elemento. Además, aplique el "Hasclass ()Método para buscar la clase establecida en el elemento recuperado.
  • Esto alertará como alertar el mensaje anterior sobre la condición satisfecha.
  • En el otro caso, se mostrará la última declaración.

Producción

La salida anterior implica que se logra el requisito deseado.

Conclusión

El "Lista de clase"Propiedad y"contiene()"Método, el"getElementsBytagName ()" y "fósforo()"Métodos, o el"jQuery"Se puede usar para verificar si un cuerpo tiene una clase específica usando JavaScript. Estos enfoques se pueden utilizar para buscar la clase particular dentro de un elemento refiriéndose al elemento correspondiente directamente, mediante su etiqueta o utilizando el método jQuery. Este blog explicó para verificar si un cuerpo tiene una clase específica en JavaScript