Método attr

El método attr permite obtener y cambiar cualquier atributo de un elemento.

Es importante no confundir las propiedades y los atributos de los elementos. Al crear el árbol DOM, los atributos se convierten en las correspondientes propiedades DOM de los elementos. Sus nombres no siempre coinciden, al igual que sus valores. Algunas propiedades también pueden no tener atributos correspondientes, pueden ser obtenidas y establecidas solo al usar el método prop, por ejemplo, la propiedad tagName.

Sintaxis

Obtener el valor de un atributo:

$(selector).attr(nombre del atributo);

Cambiar el valor de un atributo:

$(selector).attr(nombre del atributo, nuevo valor);

Cambiar los valores de varios atributos:

$(selector).attr({primer_atributo: nuevo_valor, segundo_atributo: nuevo_valor, ...});

Aplicar una función a cada elemento en el conjunto:

$(selector).attr(nombre del atributo, function(número en el conjunto, valor actual del atributo));

Ejemplo

En el siguiente ejemplo obtendremos un input por su id y mostraremos en pantalla el valor de su atributo value:

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

Ejemplo

Y ahora escribamos un nuevo valor 'www' en este mismo atributo:

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

El código HTML pasará a verse así:

<input type="text" value="www" id="test">

Ejemplo

Cambiemos simultáneamente los atributos type y value:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

El código HTML pasará a verse así:

<input type="password" value="www" id="test">

Ejemplo

Cambiemos el atributo value de cada input - agreguemos al value actual el número de orden del elemento en el conjunto:

<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

$('input').attr('value', function(index, value) {
	return value + ' ' + index;
});

El código HTML pasará a verse así:

<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

Véase también

método removeAttr,
que permite eliminar atributos de elementos
método prop,
que permite trabajar con propiedades de elementos
método val,
que permite obtener y cambiar el valor actual de un elemento