Cómo agregar el nombre de clase al elemento HTML a través de JavaScript?

JavaScript proporciona un par de enfoques para agregar el nombre de clase a un elemento HTML como el ".método add () " y el ".nombre de la clase" propiedad. El nombre de la clase se puede agregar a elementos utilizando el CSS (hoja de estilo en cascada) y JavaScript. El objetivo principal de agregar el nombre de clase a un elemento HTML es lograr diferentes funcionalidades en el elemento seleccionado utilizando el nombre de clase especificado.

Los enfoques de JavaScript de la lista a continuación se pueden usar para agregar el nombre de clase a un elemento HTML:

• Qué es ".add () "en JavaScript?
• Cómo hace el ".Método add () "Funcione en JavaScript?
• Qué es ".ClassName ”en JavaScript?
• Cómo hace el ".ClassName ”Funcionamiento de la propiedad en JavaScript?

Entonces empecemos!

Qué es ".add () "en JavaScript?

".add () ”es un método integrado de la propiedad de lista de clases que se puede usar para agregar el nombre de clase a cualquier elemento HTML específico. El fragmento a continuación le permitirá comprender cómo usar el ".Añadir el método "en JavaScript:

elemento.Lista de clase.agregar ("class_name");

Cómo hace el ".Método add () "Funcione en JavaScript?

Esta sección presentará una guía paso a paso para comprender cómo agregar el nombre de clase a un elemento HTML usando JavaScript.

En este programa crearemos tres archivos un archivo "HTML", un archivo "CSS" y un archivo "JavaScript":

Html

Cómo agregar el nombre de clase al elemento HTML a través de JavaScript?

Haz click en mi!

haciendo clic en "Haz clic en mí!"El botón agregará el nombre de clase al siguiente elemento P

Bienvenido a Linuxhint.comunicarse!!

En el fragmento anterior realizamos las siguientes funcionalidades:

• Utilizamos el

  Etiqueta para agregar un encabezado.

• A continuación, utilizamos la etiqueta para crear un botón y lo llamamos "Haga clic en mí!".
• Invocaba el "classnameFun ()" siempre que el usuario haga clic en el botón.
• A continuación, creamos un

  elemento.

• Finalmente, creamos un párrafo usando

  elemento y le asignó una identificación "addClass".

CSS

.estilo
Text-Align: Center;
estilo de fuente: cursiva;
Color de fondo: negro;
color blanco;

El archivo CSS sirvió las siguientes funciones:

• Alinee el texto en el centro utilizando la propiedad "Alinear de texto".
• Establezca el estilo de fuente en cursiva usando la propiedad "estilo de fuente".
• Establezca el color de fondo negro utilizando la propiedad de "color de fondo".
• Finalmente, configure el color del texto blanco con la propiedad "color".

Javascript

function classNameFun ()
Dejar para = documento.getElementById ("addClass");
paraca.Lista de clase.agregar ("estilo");

El .El archivo JS o JavaScript sirvió las funcionalidades que sean a continuación:

• Creó una función llamada "classnameFun ()".
• Utilizó el método getElementById () para leer/editar un elemento HTML que tiene una ID "AddClass".
• Finalmente, utilice el método Agregar para agregar el nombre al

  elemento.

Producción
En la ejecución exitosa del código, inicialmente, obtendremos la siguiente salida:

Haciendo clic en "Haz clic en mí!El botón "generará la salida dada a continuación:

Así es como el ".Método add () "Funcione en JavaScript.

Qué es ".ClassName ”en JavaScript?

El ".ClassName "es una propiedad en JavaScript que establece/devuelve los atributos de clase de un elemento HTML. Se puede usar para agregar/especificar el nombre de la clase a cualquier etiqueta HTML.

El siguiente fragmento mostrará la sintaxis básica del ".propiedad de classname ”:

elemento.classname = class_name;

Aquí, el "class_name" representa el nombre de la clase. En el caso de múltiples clases, podemos especificar el nombre de las clases usando sintaxis separada de coma.

Cómo hace el ".ClassName ”Funcionamiento de la propiedad en JavaScript?

Consideremos el siguiente ejemplo dado para obtener la comprensión básica del ".propiedad de classname ”.

Html

Cómo agregar el nombre de clase al elemento HTML a través de JavaScript?

Haz click en mi!

haciendo clic en "Haz clic en mí!"El botón agregará el nombre de clase a este elemento

La clase HTML realizó las siguientes tareas:

• Utilizado el

  elemento para agregar un encabezado.

• Etiqueta utilizada para crear un botón y lo nombró "Haga clic en mí!".
• Invocaba el "classnameFun ()" siempre que el usuario haga clic en el botón.
• Finalmente, creó un

  y le asignó una identificación "addClass".

CSS

El archivo CSS seguirá siendo el mismo que en el ejemplo anterior.

Javascript

function classNameFun ()
Dejar el tiempo = documento.getElementById ("addClass");
decisión.classname = "estilo";

En el archivo JavaScript, utilizamos el getElementById () Método para leer/editar un elemento HTML que tenga una ID ".addClass ". Después, utilizamos el método Agregar para agregar el nombre al

elemento.

Producción
Cuando ejecutamos el programa anterior, inicialmente, este programa producirá la salida dada a continuación:

Después de hacer clic en el "Haz clic en mí!"Botón, el ClassNameFun () será invocado, en consecuencia, obtendremos la siguiente salida:

La salida aclara que el nombre de la clase se ha agregado correctamente al

elemento.

Conclusión

En JavaScript, el ".método add () "y".La propiedad de classname "se usa para agregar el nombre de clase a cualquier elemento HTML. Este artículo explicó todos los conceptos básicos para agregar nombres de clase a cualquier elemento HTML. Esta publicación explicó cómo usar el ".método add () "y".propiedad de classname ”con la ayuda de algunos ejemplos adecuados.