Establecer atributos múltiples en un elemento usando JavaScript

Establecer Atributos Multiples En Un Elemento Usando Javascript



Los atributos definen características o propiedades adicionales de un elemento HTML, como color, ancho, alto, etc. Para proporcionar un atributo al elemento, pares de nombre-valor, como ' nombre = valor ”, se utilizan cuando el valor del atributo debe ir entre 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 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.claves() ” método, luego, establezca todos los atributos en el elemento HTML especificado con el “ establecerAtributo() ' método.







Sintaxis



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



elemento. establecer atributo ( nombreatributo, valoratributo ) ;

La sintaxis anterior contiene dos parámetros: “ nombre ' y ' valor ”.





  • nombreatrib ” es el nombre del nuevo atributo.
  • valoratrib ” es el valor del nuevo atributo.
  • Este método creará un nuevo atributo y le asignará un valor. Si el atributo especificado ya existe, su valor se actualizará.

Use la sintaxis dada para el método Object.keys():

Objeto . llaves ( objeto )

Devuelve una matriz de un objeto dado.



Ejemplo 1: establecer múltiples atributos en un elemento usando el método forEach() con el método setAttribute()

Primero, cree un elemento en el archivo HTML:

< identificación del botón = 'botón' > SUGERENCIA DE LINUX botón >

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

En código JavaScript, primero, crea un objeto llamado ' atributoelemento ” y agregue los atributos con nombres y valores al objeto. Aquí agregaremos el atributo de estilo, el nombre del elemento y la propiedad de inhabilitación para el elemento del botón:

constante atributoelemento = {

estilo : 'color de fondo: rgb(153, 28, 49); color blanco;' ,

nombre : 'Botón Linux' ,

desactivado : '' ,

} ;

Ahora, defina una función llamada “ establecerMúltiplesAtributosenElemento ” donde primero llame al “ Objeto.claves() ” método para obtener la matriz de claves del objeto y luego utilizar el “ para cada() ” para iterar a través de la matriz y finalmente llamar al “ establecerAtributo() ” para establecer todos los atributos definidos en el elemento HTML especificado.

función setMultipleAttributesonElement ( elemento, atributos del elemento ) {

Objeto . llaves ( atributoelemento ) . para cada ( atributo => {

elemento. establecer atributo ( atributo, elemAtributos [ atributo ] ) ;

} ) ;

}

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

constante botón = documento. getElementById ( 'botón' ) ;

Invocar la función definida “ establecerMúltiplesAtributosenElemento ” y pase el elemento como primer argumento y el objeto de atributos como segundo argumento:

establecerMúltiplesAtributosenElemento ( botón, atributos del elemento ) ;

El resultado muestra que los múltiples atributos de un botón se agregaron con éxito:

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: establecer múltiples atributos en un elemento utilizando for Loop 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 ' establecerAtributo() ' método:

función setMultipleAttributesonElement ( elemento, atributos del elemento ) {

por ( déjame en elemAttributes ) {

elemento. establecer atributo ( yo, elemAtributos [ i ] ) ;

}

}

Recupere el botón usando su id asignado:

constante botón = documento. getElementById ( 'botón' ) ;

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

establecerMúltiplesAtributosenElemento ( botón, { 'estilo' : 'color de fondo: rgb (153, 28, 49); color: blanco;' , 'desactivado' : '' , 'nombre' : 'Botón Linux' } ) ;

Producción

Hemos recopilado 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 establecerAtributo() El método se utiliza para establecer atributos únicos o múltiples para un elemento. Para establecer múltiples atributos en un elemento, primero, cree un objeto que contenga atributos en forma de nombres-valores. Obtenga las claves de los objetos en una matriz usando el ' Objeto.claves() ', luego establezca todos los atributos en los elementos especificados con el ' establecerAtributo() ' método. En esta publicación, hemos ilustrado el procedimiento para establecer múltiples atributos en un elemento HTML usando JavaScript.