Establecer múltiples atributos en un elemento usando JavaScript

Los atributos definen características o propiedades adicionales de un elemento HTML, como color, ancho, altura, etc. Para proporcionar un atributo al elemento, pares de valor de nombre, como "nombre = valor", Se utilizan donde el valor del atributo debe encerrarse en comillas. Entonces, para establecer el valor de un atributo en el elemento especificado, use el "Elemento.setAttribute ()" método.

Esta publicación ilustrará el procedimiento para establecer los múltiples atributos en un elemento HTML usando JavaScript.

Cómo establecer múltiples atributos en un elemento usando JavaScript?

Para establecer múltiples atributos en un elemento simultáneamente, primero, cree un objeto con los nombres y valores de los atributos. Obtenga una lista de las claves del objeto como una matriz con el "Objeto.llaves()El método ", entonces, establece todos los atributos en el elemento HTML especificado con el"setAttribute ()" método.

Sintaxis

La sintaxis dada se usa para el método setattribute ():

elemento.setAttribute (attrname, attrValue);

La sintaxis anterior contiene dos parámetros: "nombre" y "valor".

• "nombre de attres"Es el nombre del nuevo atributo.
• "atrevido"¿Es el valor del nuevo atributo?.
• Este método creará un nuevo atributo y le asignará un valor. Si el atributo especificado ya existe, entonces su valor se actualizará.

Use la sintaxis dada para el objeto.Método Keys ():

Objeto.claves (objeto)

Devuelve una matriz de un objeto dado.

Ejemplo 1: Establezca múltiples atributos en un elemento usando el método foreach () con el método setattribute ()

Primero, cree un elemento en el archivo HTML:

Linuxhint

Actualmente, la página web se verá así:

En el código JavaScript, primero, cree un objeto llamado "elementattributes"Y agregue los atributos con nombres y valores al objeto. Aquí, agregaremos el atributo de estilo, el nombre del elemento y la propiedad DISHAT para el elemento del botón:

const elementtibutes =
Estilo: 'Color de fondo: RGB (153, 28, 49); color blanco;',
Nombre: 'LinuxButton',
desactivado: ",
;

Ahora, defina una función llamada "setmultipleatTributesOnelement"¿Dónde primero llama al"Objeto.llaves()"Método para obtener la matriz de las claves del objeto y luego utilizar el"para cada()"Método para iterar a través de la matriz y finalmente llamar al"setAttribute ()Método para establecer todos los atributos definidos en el elemento HTML especificado.

función setMultipleatTributesOnElement (Elem, Elemattributes)
Objeto.claves (elementAttributes).foreach (attribute =>
elem.setAttribute (attribute, elemattributes [atributo]);
);

Obtenga el botón usando su ID asignada con la ayuda del "getElementById ()" método:

Const Button = documento.getElementById ('botón');

Invocar la función definida "setmultipleatTributesOnelement"Y pase el elemento como el primer argumento y el objeto de los atributos como el segundo argumento:

setMultipleatTributesOnElement (botón, elementAttributes);

La salida muestra que los múltiples atributos de un botón se agregan correctamente:

También puede establecer múltiples atributos en un elemento sin crear un objeto separado para los atributos. Para hacer esto, siga el siguiente ejemplo.

Ejemplo 2: Establezca múltiples atributos en un elemento que use para bucle con el método setattribute ()

Defina una función con dos parámetros en un archivo JavaScript y use un bucle for para establecer múltiples atributos dentro de él llamando al "setAttribute ()" método:

función setMultipleatTributesOnElement (Elem, Elemattributes)
para (déjelo en elemattributes)
elem.setAttribute (i, elemattributes [i]);

Recupere el botón usando su ID asignada:

Const Button = documento.getElementById ('botón');

Llame a la función definida pasando el elemento del botón y múltiples atributos en forma de pares de valor de nombre:

setMultipleAtTributesOnElement (botón, "estilo": "Color de fondo: RGB (153, 28, 49); color: blanco;", "desactivado": "", "nombre": "LinuxButton");

Producción

Hemos compilado toda la información esencial relacionada con la configuración de múltiples atributos en un elemento HTML usando JavaScript.

Conclusión

El JavaScript predefinido setAttribute ()El método se utiliza para establecer atributos simples o múltiples para un elemento. Para establecer múltiples atributos en un elemento, primero, cree un objeto que contenga atributos en forma de valores de nombres. Obtenga las claves de los objetos en una matriz utilizando el "Objeto.llaves()Método ", luego establezca todos los atributos en los elementos especificados con el"setAttribute ()" método. En esta publicación, hemos ilustrado el procedimiento para establecer múltiples atributos en un elemento HTML usando JavaScript.